Link Basic
<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">Basic Link</h2>
<p class="mb-4">
Tailwind CSS resets the style of links by default.
<br />
Here is a <a href="#" class="text-blue-600 underline underline-offset-2 decoration-1">standard link</a> with underline style.
</p>
<div class="space-y-4">
<div>
<h3 class="text-lg font-medium mb-2">Default Link</h3>
<a href="#" class="text-blue-600 underline underline-offset-2 decoration-1">Click me</a>
</div>
<div>
<h3 class="text-lg font-medium mb-2">With Focus & Active States</h3>
<a href="#" class="text-blue-600 underline underline-offset-2 decoration-1 hover:text-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 active:text-blue-900">Click me</a>
</div>
<div>
<h3 class="text-lg font-medium mb-2">In a paragraph context</h3>
<p>
This is a paragraph with some text content that includes a
<a href="#" class="text-blue-600 underline underline-offset-2 decoration-1">link to another page</a>
in the middle of the sentence to demonstrate how it looks in context.
</p>
</div>
</div>
</div>
Copied to clipboard