Componente de notificaciones

<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-start justify-center font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 ease-in-out">
    <div class="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white">Notifications</h2>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Your latest updates regarding bookings and appointments.</p>
    </div>

    <div class="divide-y divide-gray-200 dark:divide-gray-700">

      <!-- Notification Item 1 -->
      <div class="p-4 sm:p-6 flex items-start gap-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors duration-200">
        <div class="flex-shrink-0 w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-200 flex items-center justify-center text-lg">
          <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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
          </svg>
        </div>
        <div class="flex-grow">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Appointment Confirmed</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Your appointment with Dr. Smith on Oct 26, 2023 at 10:00 AM has been confirmed.</p>
          <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">2 hours ago</p>
        </div>
      </div>

      <!-- Notification Item 2 -->
      <div class="p-4 sm:p-6 flex items-start gap-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors duration-200">
        <div class="flex-shrink-0 w-10 h-10 rounded-full bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-200 flex items-center justify-center text-lg">
          <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="M5 13l4 4L19 7"></path>
          </svg>
        </div>
        <div class="flex-grow">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Booking Completed</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Your 'Premium Suite' reservation for Nov 1-3, 2023 is successfully booked.</p>
          <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Yesterday</p>
        </div>
      </div>

      <!-- Notification Item 3 -->
      <div class="p-4 sm:p-6 flex items-start gap-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors duration-200">
        <div class="flex-shrink-0 w-10 h-10 rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-600 dark:text-yellow-200 flex items-center justify-center text-lg">
          <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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
          </svg>
        </div>
        <div class="flex-grow">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Booking Reminder</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Don't forget your upcoming reservation for the 'Conference Room A' on Oct 28 at 2:00 PM.</p>
          <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">3 days ago</p>
        </div>
      </div>

    </div>

    <div class="p-4 sm:p-6 flex justify-center">
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium text-sm transition-colors duration-200">
        View all notifications
      </a>
    </div>
  </div>
</div>