Composant Notifications de luxe

<div class="font-sans antialiased text-gray-800 bg-gray-100 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 md:p-8 lg:p-10 min-h-screen flex items-center justify-center">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
    <div class="px-6 py-5 sm:px-8 sm:py-6 bg-gradient-to-r from-blue-600 to-blue-800 dark:from-blue-700 dark:to-blue-900 text-white flex items-center justify-between">
      <h2 class="text-2xl sm:text-3xl font-bold tracking-tight">Notifications</h2>
      <span class="px-3 py-1 bg-white dark:bg-gray-700 text-blue-800 dark:text-blue-200 rounded-full text-base font-semibold shadow-md">3 New</span>
    </div>

    <ul class="divide-y divide-gray-200 dark:divide-gray-700">
      <!-- Notification Item 1 -->
      <li class="p-4 sm:p-6 flex items-start space-x-4 group hover:bg-blue-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
        <div class="flex-shrink-0">
          <img class="h-12 w-12 rounded-full object-cover shadow-sm ring-2 ring-blue-300 dark:ring-blue-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        </div>
        <div class="flex-1 min-w-0">
          <p class="text-lg font-semibold text-blue-700 dark:text-blue-300 truncate">
            Reservation confirmed for Paris!
          </p>
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
            Your flight and hotel booking for Paris is confirmed. Have a great trip!
          </p>
          <time datetime="2023-10-27T10:00:00Z" class="text-xs text-gray-500 dark:text-gray-400 mt-2 block">2 hours ago</time>
        </div>
      </li>

      <!-- Notification Item 2 -->
      <li class="p-4 sm:p-6 flex items-start space-x-4 group hover:bg-blue-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
        <div class="flex-shrink-0">
          <img class="h-12 w-12 rounded-full object-cover shadow-sm ring-2 ring-blue-300 dark:ring-blue-500" src="https://picsum.photos/id/1018/100/100" alt="Offer Icon">
        </div>
        <div class="flex-1 min-w-0">
          <p class="text-lg font-semibold text-blue-700 dark:text-blue-300 truncate">
            New Exclusive Travel Deals!
          </p>
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
            Don't miss out on our limited-time offers to dreamy destinations.
          </p>
          <time datetime="2023-10-27T08:30:00Z" class="text-xs text-gray-500 dark:text-gray-400 mt-2 block">4 hours ago</time>
        </div>
      </li>

      <!-- Notification Item 3 -->
      <li class="p-4 sm:p-6 flex items-start space-x-4 group hover:bg-blue-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
        <div class="flex-shrink-0">
          <img class="h-12 w-12 rounded-full object-cover shadow-sm ring-2 ring-blue-300 dark:ring-blue-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Support Avatar">
        </div>
        <div class="flex-1 min-w-0">
          <p class="text-lg font-semibold text-blue-700 dark:text-blue-300 truncate">
            Quick Question About Your Upcoming Trip
          </p>
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
            Our support team wants to clarify a detail about your London itinerary.
          </p>
          <time datetime="2023-10-26T16:45:00Z" class="text-xs text-gray-500 dark:text-gray-400 mt-2 block">Yesterday</time>
        </div>
      </li>

      <!-- Notification Item 4 (Old/Read) -->
      <li class="p-4 sm:p-6 flex items-start space-x-4 dark:bg-gray-700/50 opacity-80 group hover:opacity-100 hover:bg-blue-50 dark:hover:bg-gray-700 transition-all duration-200 cursor-pointer">
        <div class="flex-shrink-0">
          <img class="h-12 w-12 rounded-full object-cover shadow-sm ring-2 ring-blue-200 dark:ring-gray-600" src="https://picsum.photos/id/1084/100/100" alt="Tips Icon">
        </div>
        <div class="flex-1 min-w-0">
          <p class="text-lg font-medium text-gray-500 dark:text-gray-400 truncate">
             Travel Safety Tips for Rome
          </p>
          <p class="text-sm text-gray-500 dark:text-gray-500 mt-1">
            Important advice to ensure a safe and enjoyable trip to Rome.
          </p>
          <time datetime="2023-10-25T09:00:00Z" class="text-xs text-gray-400 dark:text-gray-500 mt-2 block">2 days ago</time>
        </div>
      </li>

    </ul>

    <div class="p-4 sm:p-6 text-center border-t border-gray-200 dark:border-gray-700">
      <a href="#" class="inline-flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 text-base font-semibold group">
        View All Notifications
        <svg class="ml-1 h-4 w-4 transform transition-transform duration-200 group-hover:translate-x-1" 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 5l7 7-7 7"></path></svg>
      </a>
    </div>
  </div>
</div>