Tailwind Link

Responsive link built with Tailwind. The link component is an element built with colors and typography classes.


Basic example

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

Classic blue link

        
            
    <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>

    
        
    

Within the sentence

This is an example of how the basic link looks in the middle of the sentence.

This is an example of how the classic blue link looks in the middle of the sentence.

        
            
    <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>
    
        
    

Underline on hover

        
            
    <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>
    
        
    

If you are looking for more advanced options, try MDBootstrap.