Link Colors

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