HTML 代码
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden md:max-w-xl">
<div class="md:flex">
<div class="w-full p-6">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Notifications</h2>
<span class="px-3 py-1 text-sm font-semibold text-purple-800 bg-purple-200 rounded-full dark:bg-purple-700 dark:text-purple-100">3 New</span>
</div>
<!-- Notification Item 1 -->
<div class="flex items-center p-4 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full object-cover" src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
</div>
<div class="ml-4 flex-1">
<div class="flex justify-between items-center">
<p class="text-md font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
<span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300">Commented on your post "Understanding Material Design principles".</p>
</div>
</div>
<!-- Notification Item 2 -->
<div class="flex items-center p-4 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full object-cover" src="https://www.randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
</div>
<div class="ml-4 flex-1">
<div class="flex justify-between items-center">
<p class="text-md font-semibold text-gray-900 dark:text-gray-100">Jane Smith</p>
<span class="text-sm text-gray-500 dark:text-gray-400">5 hours ago</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300">Liked your recent dashboard design concept.</p>
</div>
</div>
<!-- Notification Item 3 (New) -->
<div class="flex items-center p-4 border-b border-rose-300 bg-rose-50 dark:bg-rose-900 dark:border-rose-700 hover:bg-rose-100 dark:hover:bg-rose-800 transition duration-150 ease-in-out relative">
<div class="absolute top-2 right-2 px-2 py-1 text-xs font-semibold text-rose-800 bg-rose-200 rounded-full dark:bg-rose-700 dark:text-rose-100">New</div>
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full object-cover" src="https://www.randomuser.me/api/portraits/men/19.jpg" alt="User Avatar">
</div>
<div class="ml-4 flex-1">
<div class="flex justify-between items-center">
<p class="text-md font-semibold text-gray-900 dark:text-gray-100">Robert Johnson</p>
<span class="text-sm text-gray-500 dark:text-gray-400">10 hours ago</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300">Shared your data visualization dashboard template with 5 people.</p>
</div>
</div>
<!-- Notification Item 4 -->
<div class="flex items-center p-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full object-cover" src="https://www.randomuser.me/api/portraits/women/55.jpg" alt="User Avatar">
</div>
<div class="ml-4 flex-1">
<div class="flex justify-between items-center">
<p class="text-md font-semibold text-gray-900 dark:text-gray-100">Emily White</p>
<span class="text-sm text-gray-500 dark:text-gray-400">1 day ago</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300">Started following your dashboard updates.</p>
</div>
</div>
<div class="px-6 py-4 bg-gray-50 dark:bg-gray-700 text-center">
<a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-200 font-semibold transition duration-150 ease-in-out">View All Notifications</a>
</div>
</div>
</div>
</div>
</div>