Copy successful!
Components
Underlines allow for highlighting of text. Beside the basic options that are available directly through the underline class, you can achieve more impressive results when you add a custom span element for the underline styling.
Underline
Output
Sample text
<span class="text-gray-700 flex cursor-pointer">
<span class="relative group transition duration-300">
Sample text
<span class="absolute bottom-0.5 block w-0 group-hover:w-full transition-all duration-500 h-0.5 bg-purple-500">
</span>
</span>
</span>
Code
Thick Underline
Output
Sample text
<span class="text-gray-700 flex cursor-pointer">
<span class="relative group transition duration-300">
Sample text
<span class="absolute -bottom-1 block w-0 group-hover:w-full transition-all duration-500 h-2 bg-purple-500">
</span>
</span>
</span>
Code
Underline with gradient
Output
Sample text
<span class="text-gray-700 flex cursor-pointer">
<span class="relative group transition duration-300">
Sample text
<span class="absolute bottom-0.5 block w-0 group-hover:w-full transition-all duration-500 h-0.5 bg-gradient-to-r from-purple-500 to-pink-500">
</span>
</span>
</span>
Code
Raising underline
Output
Sample text
<span class="text-gray-700 flex cursor-pointer">
<span class="relative group transition duration-300">
Sample text
<span class="absolute bottom-0.5 group-hover:h-2 block w-full transition-all duration-500 h-0.5 bg-purple-500/50">
</span>
</span>
</span>
Code
Under & Overline
Output
Sample text
<span class="text-gray-700 flex cursor-pointer">
<span class="relative group transition duration-300">
Sample text
<span class="absolute bottom-0.5 right-0 block w-0 group-hover:w-full transition-all duration-500 h-0.5 bg-purple-500">
</span>
<span class="absolute top-0.5 block w-0 transition-all group-hover:w-full duration-500 h-0.5 bg-purple-500">
</span>
</span>
</span>
Code