通知组件
一个仿生风格的通知组件，具有响应式设计和黑暗主题支持。该组件为通知提供了逼真的浮雕外观，包括细腻的阴影和光泽效果。它完全响应，并为黑暗模式提供独特样式，确保在所有光照条件下的可读性和美观。使用占位符图像作为头像。
HTML 代码
<div class="p-4 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4 dark:bg-gray-800">
<h2 class="text-xl font-bold text-gray-900 dark:text-white">Notifications</h2>
<!-- Notification 1 -->
<div class="flex items-center space-x-4 p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-inner dark:from-gray-700 dark:to-gray-900">
<img class="w-12 h-12 rounded-full ring-2 ring-gray-300 dark:ring-gray-600" src="https://randomuser.me/api/portraits/thumb/women/68.jpg" alt="Avatar">
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-gray-200">New message from <span class="font-semibold">Alice</span></p>
<p class="text-sm text-gray-500 dark:text-gray-400">Hey, are you free to chat?</p>
</div>
</div>
<!-- Notification 2 -->
<div class="flex items-center space-x-4 p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-inner dark:from-gray-700 dark:to-gray-900">
<img class="w-12 h-12 rounded-full ring-2 ring-gray-300 dark:ring-gray-600" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="Avatar">
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-gray-200">You have a new follower: <span class="font-semibold">Bob</span></p>
<p class="text-sm text-gray-500 dark:text-gray-400">Started following you 5m ago.</p>
</div>
</div>
<!-- Notification 3 -->
<div class="flex items-center space-x-4 p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-inner dark:from-gray-700 dark:to-gray-900">
<img class="w-12 h-12 rounded-full ring-2 ring-gray-300 dark:ring-gray-600" src="https://picsum.photos/id/237/80/80" alt="Event Image">
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-gray-200">Event Reminder: <span class="font-semibold">Team Meeting</span></p>
<p class="text-sm text-gray-500 dark:text-gray-400">Tomorrow at 10:00 AM.</p>
</div>
</div>
</div>