Tooltip Component

<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-10">

  <div class="relative flex flex-col items-center group">
    <button class="px-6 py-3 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark text-gray-700 dark:text-gray-300 font-semibold transition-all duration-300 hover:shadow-neumorphic-light-hover dark:hover:shadow-neumorphic-dark-hover focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
      Hover Me
    </button>
    
    <div class="absolute bottom-full mb-4 hidden group-hover:block w-64 p-4 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform translate-y-2 group-hover:translate-y-0 pointer-events-none group-hover:pointer-events-auto">
      <p class="font-bold text-lg mb-2 text-blue-600 dark:text-blue-400">Neumorphic Tooltip</p>
      <p>This is a an example of a neumorphic tooltip. It uses subtle shadows to create a soft, extruded look from the background.</p>
      <div class="absolute left-1/2 transform -translate-x-1/2 bottom-[-10px] w-0 h-0 border-l-8 border-l-transparent border-r-8 border-r-transparent border-t-8 border-t-gray-200 dark:border-t-gray-800"></div>
    </div>
  </div>

</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #a3b1c6, -6px -6px 12px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #1c1c1c, -6px -6px 12px #2e2e2e;
  }

  .shadow-neumorphic-light-hover {
    box-shadow: inset 3px 3px 6px #a3b1c6, inset -3px -3px 6px #ffffff;
  }

  .dark .shadow-neumorphic-dark-hover {
    box-shadow: inset 3px 3px 6px #1c1c1c, inset -3px -3px 6px #2e2e2e;
  }
  
  /* Complementary Colors (Example: Blue and Orange for accents) */
  .text-blue-600 {
    color: #2563eb;
  }
  .dark .text-blue-400 {
    color: #60a5fa;
  }

  .text-orange-500 {
    color: #f97316;
  }
  .dark .text-orange-400 {
    color: #fb923c;
  }
</style>