LuxuryNotificationsComponent

<div class="font-sans antialiased bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8 flex justify-center items-start min-h-screen">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">Notifications</h2>
    </div>
    <div class="divide-y divide-gray-200 dark:divide-gray-700">

      <!-- Notification Item 1 -->
      <div class="flex items-center p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
        <div class="flex-shrink-0 mr-4">
          <img class="h-12 w-12 rounded-full object-cover border-2 border-gray-200 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow">
          <p class="text-gray-800 dark:text-gray-100 leading-snug">
            <span class="font-medium text-purple-700 dark:text-purple-400">Sophie Dubois</span> liked your post.
          </p>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">2 hours ago</p>
        </div>
        <div class="flex-shrink-0 ml-4">
          <img class="h-10 w-10 object-cover rounded-md" src="https://picsum.photos/id/1015/80/80" alt="Post thumbnail">
        </div>
      </div>

      <!-- Notification Item 2 -->
      <div class="flex items-center p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
        <div class="flex-shrink-0 mr-4">
          <img class="h-12 w-12 rounded-full object-cover border-2 border-gray-200 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow">
          <p class="text-gray-800 dark:text-gray-100 leading-snug">
            <span class="font-medium text-purple-700 dark:text-purple-400">David Chen</span> started following you.
          </p>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">5 hours ago</p>
        </div>
        <div class="flex-shrink-0 ml-4">
          <button class="px-3 py-1 text-sm bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600 text-white rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">
            Follow Back
          </button>
        </div>
      </div>

      <!-- Notification Item 3 -->
      <div class="flex items-center p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
        <div class="flex-shrink-0 mr-4">
          <img class="h-12 w-12 rounded-full object-cover border-2 border-gray-200 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/3.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow">
          <p class="text-gray-800 dark:text-gray-100 leading-snug">
            <span class="font-medium text-purple-700 dark:text-purple-400">Emily White</span> commented on your photo.
          </p>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">1 day ago</p>
        </div>
        <div class="flex-shrink-0 ml-4">
          <img class="h-10 w-10 object-cover rounded-md" src="https://picsum.photos/id/1084/80/80" alt="Post thumbnail">
        </div>
      </div>

      <!-- Notification Item 4 -->
      <div class="flex items-center p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
        <div class="flex-shrink-0 mr-4">
          <img class="h-12 w-12 rounded-full object-cover border-2 border-gray-200 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow">
          <p class="text-gray-800 dark:text-gray-100 leading-snug">
            <span class="font-medium text-purple-700 dark:text-purple-400">Mark Johnson</span> mentioned you in a post.
          </p>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">3 days ago</p>
        </div>
        <div class="flex-shrink-0 ml-4">
          <img class="h-10 w-10 object-cover rounded-md" src="https://picsum.photos/id/1040/80/80" alt="Post thumbnail">
        </div>
      </div>

    </div>
    <div class="p-4 sm:p-6 border-t border-gray-200 dark:border-gray-700 text-center">
      <a href="#" class="text-lg text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 font-medium transition-colors duration-200">
        View All Notifications
      </a>
    </div>
  </div>
</div>