Notifications Component

<div class="relative min-h-screen bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-700 p-8 flex items-center justify-center font-sans">

  <!-- Skeuomorphic Notification Container -->
  <div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-800 dark:to-gray-600 rounded-3xl shadow-2xl p-6 md:p-10 w-full max-w-lg
              border-t border-l border-gray-50 dark:border-gray-700
              border-b border-r border-gray-400 dark:border-gray-900
              transform transition-all duration-300 hover:scale-105">

    <!-- Header -->
    <div class="flex justify-between items-center mb-8 pb-4 border-b border-gray-300 dark:border-gray-500">
      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-gray-100 drop-shadow-md tracking-wide">Notifications</h2>
      <div class="relative">
        <button class="w-12 h-12 rounded-full bg-gradient-to-br from-rose-500 to-rose-700 dark:from-rose-700 dark:to-rose-900 p-1
                       shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200
                       focus:outline-none focus:ring-4 focus:ring-rose-300 dark:focus:ring-rose-600
                       flex items-center justify-center">
          <span class="text-white text-xl font-bold">5</span>
        </button>
        <span class="absolute top-0 right-0 block h-4 w-4 bg-lime-400 dark:bg-lime-600 rounded-full ring-2 ring-white dark:ring-gray-800 animate-pulse"></span>
      </div>
    </div>

    <!-- Notification List -->
    <div class="space-y-6 max-h-96 overflow-y-auto pr-2 custom-scrollbar">

      <!-- Notification Item 1: New Order -->
      <div class="flex items-center bg-gradient-to-br from-white to-gray-100 dark:from-gray-700 dark:to-gray-800 p-4 rounded-xl shadow-md
                  border-t border-l border-gray-100 dark:border-gray-600
                  border-b border-r border-gray-300 dark:border-gray-900
                  transform transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5">
        <div class="flex-shrink-0 w-14 h-14 rounded-full bg-gradient-to-br from-green-400 to-green-600 dark:from-green-600 dark:to-green-800
                    flex items-center justify-center shadow-inner-lg shadow-green-500/50 dark:shadow-green-900/50 mr-4">
          <svg class="w-7 h-7 text-white" 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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.592 1L21 6m-4 3l4 2m-4 2l4 2m-4 2l4 2M3 6l4 2m-4 6l4 2m-4 2l4 2M12 18h.01"></path></svg>
        </div>
        <div class="flex-grow">
          <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">New Order Placed!</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Order #12345 for $120.00 has been confirmed.</p>
          <p class="text-xs text-gray-500 dark:text-gray-500 mt-1">2 minutes ago</p>
        </div>
      </div>

      <!-- Notification Item 2: Product Restock -->
      <div class="flex items-center bg-gradient-to-br from-white to-gray-100 dark:from-gray-700 dark:to-gray-800 p-4 rounded-xl shadow-md
                  border-t border-l border-gray-100 dark:border-gray-600
                  border-b border-r border-gray-300 dark:border-gray-900
                  transform transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5">
        <div class="flex-shrink-0 w-14 h-14 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800
                    flex items-center justify-center shadow-inner-lg shadow-blue-500/50 dark:shadow-blue-900/50 mr-4">
          <svg class="w-7 h-7 text-white" 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
        </div>
        <div class="flex-grow">
          <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Restocked!</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Your favorite