Colored links
Coloring links can be a great way to distinguish them from your regular text, or add a bit of flair to your website.
<a href="#!" class="text-blue-600 hover:text-blue-700 transition duration-300 ease-in-out mb-4">Primary link</a>
<a href="#!" class="text-purple-600 hover:text-purple-700 transition duration-300 ease-in-out mb-4">Secondary link</a>
<a href="#!" class="text-green-500 hover:text-green-600 transition duration-300 ease-in-out mb-4">Success link</a>
<a href="#!" class="text-red-600 hover:text-red-700 transition duration-300 ease-in-out mb-4">Danger link</a>
<a href="#!" class="text-yellow-500 hover:text-yellow-600 transition duration-300 ease-in-out mb-4">Warning link</a>
<a href="#!" class="text-blue-400 hover:text-blue-500 transition duration-300 ease-in-out mb-4">Info link</a>
<a href="#!" class="text-gray-200 hover:text-gray-300 transition duration-300 ease-in-out mb-4">Light link</a>
<a href="#!" class="text-gray-800 hover:text-gray-900 transition duration-300 ease-in-out mb-4">Dark link</a>
<div class="bg-gray-900 p-4 rounded mb-4">
<a href="#!" class="text-white hover:text-gray-100 transition duration-300 ease-in-out">White link</a>
</div>
<a href="#!" class="text-black transition duration-300 ease-in-out">Black link</a>
Within the sentence
Use color depending on whether it has been visited, is unvisited, or is active.
This is an example of how the basic link looks in the middle of the sentence.
This is an example of how the standard 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>
Underline
use the .underline property to specify that an underline should appear under your text.
<a href="#!" class="underline">This is a basic link example</a>
Underline on hover
Use a simple visual effect to underline text 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 link
Use the code below to create a button that looks like an active link.
<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.