Paper_Rainbow_Tooltip_Component

<div class="flex min-h-screen items-center justify-center bg-gray-100 p-4 dark:bg-gray-900 font-sans">
  <div class="relative group max-w-xs text-center">
    <button class="relative z-10 p-3 rounded-lg shadow-md transition-all duration-300 ease-in-out
                   bg-gradient-to-r from-red-500 via-yellow-500 to-indigo-500
                   text-white font-semibold text-lg
                   hover:scale-105 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700
                   dark:from-red-700 dark:via-yellow-700 dark:to-indigo-700">
      Hover for Info
    </button>

    <div class="absolute left-1/2 -translate-x-1/2 mt-3 p-4 pt-6
                opacity-0 invisible group-hover:opacity-100 group-hover:visible
                transition-all duration-300 ease-in-out transform group-hover:-translate-y-full
                w-64 sm:w-72 md:w-80 lg:w-96
                bg-white dark:bg-gray-800 rounded-lg shadow-xl outline outline-offset-4 outline-1 outline-gray-200 dark:outline-gray-700
                before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:-ml-2 before:w-0 before:h-0
                before:border-l-[8px] before:border-r-[8px] before:border-t-[8px]
                before:border-l-transparent before:border-r-transparent before:border-t-white dark:before:border-t-gray-800
                before:-translate-y-2 group-hover:before:-translate-y-1">
      <p class="text-gray-800 dark:text-gray-200 text-sm leading-relaxed mb-1
                font-serif italic tracking-wide group-hover:animate-fade-in">
        "The only source of knowledge is experience."
      </p>
      <p class="text-gray-600 dark:text-gray-400 text-xs font-mono subpixel-antialiased">
        - Albert Einstein
      </p>

      <!-- Tiny paper clip detail -->
      <div class="absolute top-1 left-1/2 -translate-x-1/2 w-4 h-4 rounded-full
                  bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-600 dark:to-gray-700
                  shadow-inner blur-[0.5px]
                  border border-gray-400 dark:border-gray-500"></div>
    </div>
  </div>
</div>

<!-- To make the 'fade-in' work (optional, but good for subtle animation) -->
<style>
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .group-hover\:animate-fade-in {
    animation: fade-in 0.3s ease-out forwards;
    animation-delay: 0.1s; /* Slight delay after tooltip is visible */
  }
</style>