Tailwind Link

        
            
    <a href="#!" class="underline">This is a basic link example</a>
    
        
    

        
            
    <a href="#!" class="text-blue-600 hover:text-blue-700 transition duration-300 ease-in-out">This is a classic web blue link example without underline</a>

    
        
    

        
            
    <p class="mb-4">This is an example of how the basic <a href="#!" class="underline">link</a> looks in the middle of the sentence.</p>
    <p>This is an example of how the <a href="#!" class="text-blue-600 hover:text-blue-700 transition duration-300 ease-in-out">classic blue link</a> looks in the middle of the sentence.</p>
    
        
    

        
            
    <a href="#!" class="underline text-blue-600 hover:text-blue-700 transition duration-300 ease-in-out">This is the primary link</a>
    
        
    

        
            
    <a href="#!" class="underline text-purple-600 hover:text-purple-700 transition duration-300 ease-in-out">This is the secondary link</a>
    
        
    

        
            
    <a href="#!" class="underline text-green-500 hover:text-green-600 transition duration-300 ease-in-out">This is a success link</a>
    
        
    

        
            
    <a href="#!" class="underline text-red-600 hover:text-red-700 transition duration-300 ease-in-out">This is a danger link</a>
    
        
    

        
            
    <a href="#!" class="underline text-yellow-500 hover:text-yellow-600 transition duration-300 ease-in-out">This is a warning link</a>
    
        
    

        
            
    <a href="#!" class="underline text-blue-400 hover:text-blue-500 transition duration-300 ease-in-out">This is an info link</a>
    
        
    

        
            
    <a href="#!" class="underline text-gray-200 hover:text-gray-300 transition duration-300 ease-in-out">This is a light link</a>
    
        
    

        
            
    <a href="#!" class="underline text-gray-800 hover:text-gray-900 transition duration-300 ease-in-out">This is a dark link</a>
    
        
    

        
            
    <div class="bg-gray-900 p-4 rounded">
      <a href="#!" class="underline text-white hover:text-gray-100 transition duration-300 ease-in-out">This is a white link</a>
    </div>
    
        
    

        
            
    <a href="#!" class="underline decoration-transparent hover:decoration-inherit transition duration-300 ease-in-out">A link with underline on hover</a>
    
        
    

        
            
    <button type="button" class="inline-block px-6 py-2.5 bg-transparent text-blue-600 font-medium text-xs leading-tight uppercase rounded hover:bg-gray-100 focus:text-blue-700 focus:bg-gray-100 focus:outline-none focus:ring-0 active:bg-gray-200 active:text-blue-800 transition duration-300 ease-in-out">Link</button>