Bauhaus_Autumn_Tooltip_Component

<div class="flex items-center justify-center min-h-screen bg-orange-50 dark:bg-gray-900 p-4 font-sans">
  <div class="relative group max-w-sm">
    <button class="px-6 py-3 bg-red-800 text-white font-bold uppercase tracking-wider text-sm rounded-none shadow-lg transform transition duration-300 ease-in-out hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-opacity-75 dark:bg-red-900 dark:hover:bg-red-800">
      Hover for Details
    </button>

    <div class="absolute left-1/2 -translate-x-1/2 bottom-full mb-4 w-64 p-4 
                bg-yellow-800 dark:bg-gray-800 
                text-white dark:text-gray-200 
                border-4 border-amber-900 dark:border-gray-700 
                opacity-0 invisible group-hover:opacity-100 group-hover:visible 
                transition-opacity duration-300 ease-in-out 
                group-hover:translate-y-0 transform translate-y-4
                shadow-xl z-10 
                origin-bottom 
                before:content-[''] before:absolute before:left-1/2 before:-translate-x-1/2 before:top-full before:border-l-[10px] before:border-l-transparent before:border-r-[10px] before:border-r-transparent before:border-t-[10px] before:border-t-yellow-800 dark:before:border-t-gray-800">
      <h3 class="text-lg font-extrabold mb-2 uppercase tracking-wide text-amber-100 dark:text-gray-100">Luxury Serum X</h3>
      <p class="text-sm leading-relaxed mb-3 text-amber-200 dark:text-gray-300">
        Unlock radiant skin with our concentrated formula. Infused with natural extracts.
      </p>
      <div class="flex items-center space-x-2 mb-3">
        <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Model" class="w-8 h-8 rounded-none border border-amber-600 dark:border-gray-600 object-cover">
        <span class="text-xs font-semibold text-amber-300 dark:text-gray-400">A favorite of beauty influencers!</span>
      </div>
      <a href="#" class="inline-block px-4 py-2 bg-amber-900 text-amber-100 font-bold text-xs uppercase tracking-wider hover:bg-amber-700 dark:bg-gray-700 dark:hover:bg-gray-600 transition-colors duration-200">
        Shop Now
      </a>
    </div>
  </div>
</div>