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>