Glassmorphism_Dashboard_Modal

<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-20 backdrop-blur-sm dark:bg-gray-900 dark:bg-opacity-40">
  <div class="relative w-full max-w-4xl max-h-[90vh] overflow-y-auto bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl border border-white border-opacity-20 dark:bg-gray-800 dark:bg-opacity-10 dark:border-gray-700 dark:border-opacity-30 transform transition-all sm:scale-100 opacity-100">
    <div class="p-6 sm:p-8 space-y-8">
      <!-- Modal Header -->
      <div class="flex items-center justify-between pb-4 border-b border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-30">
        <h2 class="text-2xl sm:text-3xl font-extrabold text-white dark:text-gray-100 drop-shadow-lg">Dashboard Analytics Overview</h2>
        <button class="p-2 rounded-full text-white text-opacity-80 dark:text-gray-300 dark:text-opacity-80 hover:bg-white hover:bg-opacity-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white focus:ring-opacity-50 dark:hover:bg-gray-700 dark:hover:bg-opacity-30 dark:focus:ring-gray-600 transition duration-300">
          <svg class="w-6 h-6" 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="M6 18L18 6M6 6l12 12"></path></svg>
        </button>
      </div>

      <!-- Modal Body - Grid Layout -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

        <!-- Card 1: Sales Summary -->
        <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-md rounded-lg p-6 shadow-lg border border-white border-opacity-15 dark:bg-gray-800 dark:bg-opacity-10 dark:border-gray-700 dark:border-opacity-20 transition duration-300 hover:scale-[1.02]">
          <h3 class="text-xl font-semibold text-white dark:text-gray-100 mb-4 drop-shadow">Total Sales</h3>
          <p class="text-4xl font-bold text-white dark:text-gray-50 mb-2 drop-shadow">$12,500</p>
          <p class="text-sm text-white text-opacity-70 dark:text-gray-300 dark:text-opacity-70">+8% from last month</p>
          <div class="mt-4 flex items-center justify-end">
            <span class="text-xs text-white text-opacity-60 dark:text-gray-400">Updated 2 mins ago</span>
          </div>
        </div>

        <!-- Card 2: New Customers -->
        <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-md rounded-lg p-6 shadow-lg border border-white border-opacity-15 dark:bg-gray-800 dark:bg-opacity-10 dark:border-gray-700 dark:border-opacity-20 transition duration-300 hover:scale-[1.02]">
          <h3 class="text-xl font-semibold text-white dark:text-gray-100 mb-4 drop-shadow">New Customers</h3>
          <p class="text-4xl font-bold text-white dark:text-gray-50 mb-2 drop-shadow">280</p>
          <p class="text-sm text-white text-opacity-70 dark:text-gray-300 dark:text-opacity-70">+15% from last week</p>
          <div class="mt-4 flex items-center justify-end">
            <span class="text-xs text-white text-opacity-60 dark:text-gray-400">Updated 1 hour ago</span>
          </div>
        </div>

        <!-- Card 3: Avg. Session Duration -->
        <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-md rounded-lg p-6 shadow-lg border border-white border-opacity-15 dark:bg-gray-800 dark:bg-opacity-10 dark:border-gray-700 dark:border-opacity-20 transition duration-300 hover:scale-[1.02]">
          <h3 class="text-xl font-semibold text-white dark:text-gray-100 mb-4 drop-shadow">Avg. Session</h3>
          <p class="text-4xl font-bold text-white dark:text-gray-50 mb-2 drop-shadow">03:45<span class="text-xl">min</span></p>
          <p class="text-sm text-white text-opacity-70 dark:text-gray-300 dark:text-opacity-70">-2% from yesterday</p>
          <div class="mt-4 flex items-center justify-end">
            <span class="text-xs text-white text-opacity-60 dark:text-gray-400">Refreshed now</span>
          </div>
        </div>

        <!-- Card 4: Recent Activities (List) -->
        <div class="md:col-span-2 bg-white bg-opacity-10 backdrop-filter backdrop-blur-md rounded-lg p-6 shadow-lg border border-white border-opacity-15 dark:bg-gray-800 dark:bg-opacity-10 dark:border-gray-700 dark:border-opacity-20">
          <h3 class="text-xl font-semibold text-white dark:text-gray-100 mb-5 drop-shadow">Recent Activities</h3>
          <ul class="space-y-4">
            <li class="flex items-center space-x-3">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full object-cover border border-white border-opacity-30 dark:border-gray-600">
              <div class="flex-1">
                <p class="text-white dark:text-gray-100"><span class="font-medium">Jane Doe</span> updated product pricing.</p>
                <p class="text-xs text-white text-opacity-60 dark:text-gray-400">15 minutes ago</p>
              </div>
              <span class="text-sm text-white text-opacity-70 dark:text-gray-300 px-3 py-1 rounded-full bg-white bg-opacity-15 dark:bg-gray-700 dark:bg-opacity-30">Sales</span>
            </li>
            <li class="flex items-center space-x-3">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full object-cover border border-white border-opacity-30 dark:border-gray-600">
              <div class="flex-1">
                <p class="text-white dark:text-gray-100"><span class="font-medium">John Smith</span> added a new report.</p>
                <p class="text-xs text-white text-opacity-60 dark:text-gray-400">1 hour ago</p>
              </div>
              <span class="text-sm text-white text-opacity-70 dark:text-gray-300 px-3 py-1 rounded-full bg-white bg-opacity-15 dark:bg-gray-700 dark:bg-opacity-30">Data</span>
            </li>
            <li class="flex items-center space-x-3">
              <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar" class="w-10 h-10 rounded-full object-cover border border-white border-opacity-30 dark:border-gray-600">
              <div class="flex-1">
                <p class="text-white dark:text-gray-100"><span class="font-medium">Emily White</span> completed task 'CRM Integration'.</p>
                <p class="text-xs text-white text-opacity-60 dark:text-gray-400">Yesterday</p>
              </div>
              <span class="text-sm text-white text-opacity-70 dark:text-gray-300 px-3 py-1 rounded-full bg-white bg-opacity-15 dark:bg-gray-700 dark:bg-opacity-30">Project</span>
            </li>
          </ul>
        </div>

        <!-- Card 5: Performance Chart (Placeholder) -->
        <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-md rounded-lg p-6 shadow-lg border border-white border-opacity-15 flex flex-col items-center justify-center dark:bg-gray-800 dark:bg-opacity-10 dark:border-gray-700 dark:border-opacity-20">
          <h3 class="text-xl font-semibold text-white dark:text-gray-100 mb-4 drop-shadow">Quarterly Performance</h3>
          <img src="https://picsum.photos/300/200?grayscale&blur=5" alt="Chart Placeholder" class="w-full h-auto rounded-md object-cover opacity-70" />
          <p class="text-sm text-white text-opacity-70 dark:text-gray-300 dark:text-opacity-70 mt-3">Visualization data here.</p>
        </div>

      </div>

      <!-- Modal Footer -->
      <div class="pt-6 border-t border-white border-opacity-20 flex flex-col sm:flex-row justify-end space-y-4 sm:space-y-0 sm:space-x-4 dark:border-gray-700 dark:border-opacity-30">
        <button class="flex-1 sm:flex-none px-6 py-3 rounded-full text-white text-opacity-80 dark:text-gray-300 dark:text-opacity-80 border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-30 shadow-md hover:bg-white hover:bg-opacity-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white focus:ring-opacity-50 dark:hover:bg-gray-700 dark:hover:bg-opacity-30 dark:focus:ring-gray-600 transition duration-300">
          Refresh Data
        </button>
        <button class="flex-1 sm:flex-none px-6 py-3 rounded-full bg-white bg-opacity-25 text-white font-semibold shadow-lg hover:bg-opacity-35 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white dark:bg-gray-700 dark:bg-opacity-30 dark:hover:bg-opacity-40 dark:focus:ring-gray-600 transition duration-300">
          Close Panel
        </button>
      </div>
    </div>
  </div>
</div>