Tailwind CSS Link Components

                            <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> 
                        

                            <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> 
                        

                            <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">Colored Links</h2>
  
  <p class="mb-4">
    Links with different color variations to match your design theme.
  </p>
  
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div>
      <h3 class="text-lg font-medium mb-2">Default (Blue)</h3>
      <a href="#" class="text-blue-600 underline underline-offset-2 hover:text-blue-800">Click me</a>
    </div>
    
    <div>
      <h3 class="text-lg font-medium mb-2">Primary (Indigo)</h3>
      <a href="#" class="text-indigo-600 underline underline-offset-2 hover:text-indigo-800">Click me</a>
    </div>
    
    <div>
      <h3 class="text-lg font-medium mb-2">Secondary (Purple)</h3>
      <a href="#" class="text-purple-600 underline underline-offset-2 hover:text-purple-800">Click me</a>
    </div>
    
    <div>
      <h3 class="text-lg font-medium mb-2">Accent (Pink)</h3>
      <a href="#" class="text-pink-600 underline underline-offset-2 hover:text-pink-800">Click me</a>
    </div>
    
    <div>
      <h3 class="text-lg font-medium mb-2">Success (Green)</h3>
      <a href="#" class="text-green-600 underline underline-offset-2 hover:text-green-800">Click me</a>
    </div>
    
    <div>
      <h3 class="text-lg font-medium mb-2">Info (Sky)</h3>
      <a href="#" class="text-sky-600 underline underline-offset-2 hover:text-sky-800">Click me</a>
    </div>
    
    <div>
      <h3 class="text-lg font-medium mb-2">Warning (Amber)</h3>
      <a href="#" class="text-amber-600 underline underline-offset-2 hover:text-amber-800">Click me</a>
    </div>
    
    <div>
      <h3 class="text-lg font-medium mb-2">Error (Red)</h3>
      <a href="#" class="text-red-600 underline underline-offset-2 hover:text-red-800">Click me</a>
    </div>
    
    <div>
      <h3 class="text-lg font-medium mb-2">Neutral (Gray)</h3>
      <a href="#" class="text-gray-600 underline underline-offset-2 hover:text-gray-800">Click me</a>
    </div>
    
    <div>
      <h3 class="text-lg font-medium mb-2">Dark Mode Compatible</h3>
      <a href="#" class="text-blue-600 dark:text-blue-400 underline underline-offset-2 hover:text-blue-800 dark:hover:text-blue-300">Click me</a>
    </div>
  </div>
</div> 
                        

                            <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>