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>