极简通知组件（灰度）
一个简单的极简通知组件，采用灰度色彩，适用于投资组合，支持响应式和深色模式，使用Tailwind CSS。使用picsum.photos获取图片和randomuser.me获取头像。
HTML 代码
<div class="container mx-auto p-4">
<!-- Light mode (default) -->
<div class="bg-white shadow-md rounded-lg p-4 mb-4 hidden dark:block">
<div class="flex items-start">
<img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div class="flex-grow">
<p class="text-gray-800 font-semibold">New Message</p>
<p class="text-gray-600 text-sm">You have a new message from John Doe.</p>
</div>
<button class="text-gray-500 hover:text-gray-700 focus:outline-none">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
<!-- Dark mode -->
<div class="bg-gray-800 shadow-md rounded-lg p-4 mb-4 dark:hidden">
<div class="flex items-start">
<img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div class="flex-grow">
<p class="text-gray-200 font-semibold">New Message</p>
<p class="text-gray-400 text-sm">You have a new message from John Doe.</p>
</div>
<button class="text-gray-500 hover:text-gray-300 focus:outline-none">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</div>