Link Styles
<div class="max-w-lg mx-auto my-8 p-6 bg-white rounded-lg shadow-md">
<h2 class="text-xl font-semibold mb-4">Link Styles</h2>
<p class="mb-4">
Different styling options for links beyond just colors and underlines.
</p>
<div class="space-y-6">
<div>
<h3 class="text-lg font-medium mb-3">Decorative Underlines</h3>
<div class="space-y-2">
<div>
<span class="text-sm text-gray-500 mr-2">Dotted:</span>
<a href="#" class="text-blue-600 underline decoration-dotted underline-offset-4 hover:text-blue-800">Click me</a>
</div>
<div>
<span class="text-sm text-gray-500 mr-2">Dashed:</span>
<a href="#" class="text-blue-600 underline decoration-dashed underline-offset-4 hover:text-blue-800">Click me</a>
</div>
<div>
<span class="text-sm text-gray-500 mr-2">Wavy:</span>
<a href="#" class="text-blue-600 underline decoration-wavy underline-offset-4 hover:text-blue-800">Click me</a>
</div>
<div>
<span class="text-sm text-gray-500 mr-2">Double:</span>
<a href="#" class="text-blue-600 underline decoration-double underline-offset-4 hover:text-blue-800">Click me</a>
</div>
</div>
</div>
<div>
<h3 class="text-lg font-medium mb-3">With Icons</h3>
<div class="space-y-2">
<div>
<a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-800">
<span class="underline underline-offset-2">External link</span>
<svg class="w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
<path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
</svg>
</a>
</div>
<div>
<a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-800">
<span class="underline underline-offset-2">Download file</span>
<svg class="w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</div>
<div>
<h3 class="text-lg font-medium mb-3">Button-Like Links</h3>
<div class="space-x-2">
<a href="#" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
Primary
</a>
<a href="#" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-blue-600 bg-white border border-blue-600 rounded-md hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
Secondary
</a>
</div>
</div>
<div>
<h3 class="text-lg font-medium mb-3">Animated Links</h3>
<a href="#" class="relative text-blue-600 hover:text-blue-800 group">
<span>Hover me for animation</span>
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-600 group-hover:w-full transition-all duration-300"></span>
</a>
</div>
</div>
</div>
Copied to clipboard