Skeuomorphic Dashboard Tooltip

<div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Tooltip Container -->
  <div class="relative group">
    <!-- Trigger Element (e.g., a button or icon) -->
    <button class="px-6 py-3 text-white rounded-lg shadow-lg bg-gradient-to-br from-blue-600 to-blue-800 hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 transform hover:scale-105">
      Hover for Dashboard Info
    </button>

    <!-- Tooltip Content -->
    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 w-80 p-6 rounded-xl shadow-2xl opacity-0 group-hover:opacity-100 group-hover:visible transition-all duration-500 transform scale-90 group-hover:scale-100
                bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900
                border-4 border-gray-300 dark:border-gray-600
                hover:from-gray-300 hover:to-gray-500 dark:hover:from-gray-600 dark:hover:to-gray-800
                flex flex-col space-y-4
                pointer-events-none group-hover:pointer-events-auto">

      <!-- Top Bar with Icon and Title -->
      <div class="flex items-center pb-3 border-b-2 border-gray-300 dark:border-gray-600">
        <svg class="w-8 h-8 mr-3 text-indigo-700 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L12 21.75l2.25-4.75M12 17V3m-4.5 9h9"></path>
        </svg>
        <h3 class="text-xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-md">Dashboard Overview</h3>
      </div>

      <!-- Key Metrics Section -->
      <div class="grid grid-cols-2 gap-4">
        <div class="p-3 rounded-lg bg-gradient-to-br from-red-300 to-red-500 dark:from-red-700 dark:to-red-900 shadow-inner">
          <p class="text-sm font-semibold text-white dark:text-gray-200">Revenue</p>
          <p class="text-lg font-bold text-white dark:text-gray-100">$12,450</p>
        </div>
        <div class="p-3 rounded-lg bg-gradient-to-br from-green-300 to-green-500 dark:from-green-700 dark:to-green-900 shadow-inner">
          <p class="text-sm font-semibold text-white dark:text-gray-200">Users</p>
          <p class="text-lg font-bold text-white dark:text-gray-100">8,900</p>
        </div>
        <div class="p-3 rounded-lg bg-gradient-to-br from-yellow-300 to-yellow-500 dark:from-yellow-700 dark:to-yellow-900 shadow-inner">
          <p class="text-sm font-semibold text-gray-800 dark:text-gray-200">Completion</p>
          <p class="text-lg font-bold text-gray-800 dark:text-gray-100">75%</p>
        </div>
        <div class="p-3 rounded-lg bg-gradient-to-br from-purple-300 to-purple-500 dark:from-purple-700 dark:to-purple-900 shadow-inner">
          <p class="text-sm font-semibold text-white dark:text-gray-200">Avg. Time</p>
          <p class="text-lg font-bold text-white dark:text-gray-100">4:30 min</p>
        </div>
      </div>

      <!-- Recent Activity / News Feed Mock-up -->
      <div class="p-3 rounded-lg bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-900 shadow-inner border border-gray-200 dark:border-gray-700">
        <h4 class="mb-2 text-md font-semibold text-gray-700 dark:text-gray-200">Recent Activity</h4>
        <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-300">
          <li class="flex items-center">
            <img class="object-cover w-6 h-6 mr-2 rounded-full shadow" src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar">
            <span>New user