一个简单的响应式通知组件,支持深色模式,采用拟物化风格和灰度配色方案设计。非常适合展示最低设计技能的作品集。
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4"> <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden transform duration-300 hover:scale-105"> <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 flex items-center justify-between"> <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Notifications</h3> <span class="text-sm text-gray-500 dark:text-gray-400">3 New</span> </div> <div class="p-4 space-y-4"> <!-- Notification Item 1 --> <div class="flex items-start space-x-3 p-3 rounded-md bg-gray-100 dark:bg-gray-750 shadow-md border border-gray-200 dark:border-gray-700 transform duration-200 hover:shadow-lg"> <img class="h-10 w-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="Avatar"> <div class="flex-1"> <p class="text-sm font-medium text-gray-800 dark:text-gray-200">John Doe commented on your post.</p> <p class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</p> </div> </div> <!-- Notification Item 2 --> <div class="flex items-start space-x-3 p-3 rounded-md bg-gray-100 dark:bg-gray-750 shadow-md border border-gray-200 dark:border-gray-700 transform duration-200 hover:shadow-lg"> <img class="h-10 w-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="Avatar"> <div class="flex-1"> <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Jane Smith liked your photo.</p> <p class="text-xs text-gray-500 dark:text-gray-400">5 hours ago</p> </div> </div> <!-- Notification Item 3 --> <div class="flex items-start space-x-3 p-3 rounded-md bg-gray-100 dark:bg-gray-750 shadow-md border border-gray-200 dark:border-gray-700 transform duration-200 hover:shadow-lg"> <img class="h-10 w-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="Avatar"> <div class="flex-1"> <p class="text-sm font-medium text-gray-800 dark:text-gray-200">You have a new message from Bob Johnson.</p> <p class="text-xs text-gray-500 dark:text-gray-400">1 day ago</p> </div> </div> </div> <div class="px-6 py-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-right"> <a href="#" class="text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transform duration-200 hover:underline">View All Notifications</a> </div> </div> </div>
用于电子商务的拟物化通知组件,具有鲜艳的配色方案、复杂的界面、响应式设计和深色主题支持,使用 Tailwind CSS 构建。
响应式通知组件,具有 3D 设计、简单的灰度布局和深色主题支持,适用于商业网站。
具有明亮色彩方案的社交媒体界面的响应式通知组件,支持深色模式。