Link Hover

                    <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">Hover Underline Links</h2>
  
  <p class="mb-4">
    These links only show their underline when you hover over them, creating a cleaner look by default.
  </p>
  
  <div class="space-y-4">
    <div>
      <h3 class="text-lg font-medium mb-2">Basic Hover Link</h3>
      <a href="#" class="text-blue-600 no-underline hover:underline hover:underline-offset-2">Click me</a>
    </div>
    
    <div>
      <h3 class="text-lg font-medium mb-2">With Transition Effect</h3>
      <a href="#" class="text-blue-600 no-underline hover:underline hover:underline-offset-2 hover:decoration-2 transition-all duration-150">Click me</a>
    </div>
    
    <div>
      <h3 class="text-lg font-medium mb-2">With Color Change on Hover</h3>
      <a href="#" class="text-blue-600 no-underline hover:underline hover:underline-offset-2 hover:text-blue-800">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 no-underline hover:underline hover:underline-offset-2">link to another page</a>
        in the middle of the sentence to demonstrate how hover underline looks in context.
      </p>
    </div>
  </div>
</div>