一个响应式活动feed组件,为暗模式 UI 设计,使用 Tailwind CSS。
<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg"> <h2 class="text-2xl font-bold mb-4">Activity Feed</h2> <ul class="space-y-4"> <li class="flex items-start"> <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3"> <div class="bg-gray-700 p-4 rounded-lg flex-1"> <p class="font-semibold">John Doe</p> <p class="text-gray-400">Commented on your post</p> <span class="text-gray-500 text-sm">2 hours ago</span> </div> </li> <li class="flex items-start"> <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3"> <div class="bg-gray-700 p-4 rounded-lg flex-1"> <p class="font-semibold">Jane Smith</p> <p class="text-gray-400">Liked your photo</p> <span class="text-gray-500 text-sm">4 hours ago</span> </div> </li> <li class="flex items-start"> <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3"> <div class="bg-gray-700 p-4 rounded-lg flex-1"> <p class="font-semibold">Sam Wilson</p> <p class="text-gray-400">Started following you</p> <span class="text-gray-500 text-sm">6 hours ago</span> </div> </li> <li class="flex items-start"> <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3"> <div class="bg-gray-700 p-4 rounded-lg flex-1"> <p class="font-semibold">Lisa Ray</p> <p class="text-gray-400">Shared your article</p> <span class="text-gray-500 text-sm">1 day ago</span> </div> </li> <li class="flex items-start"> <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3"> <div class="bg-gray-700 p-4 rounded-lg flex-1"> <p class="font-semibold">Michael Brown</p> <p class="text-gray-400">Added a photo</p> <span class="text-gray-500 text-sm">2 days ago</span> </div> </li> </ul> </div>
一个简单的、受野兽派启发的活动源组件,具有单色配色方案,适用于商业/公司网站。具有高对比度、大胆的排版和完全响应能力,并支持深色模式。
一个简单的复古/复古风格的活动源组件,专为博客内容消费而设计,具有单色蓝色配色方案和使用 Tailwind CSS 的响应式深色模式支持。
一个响应式活动动态组件,采用3D风格设计,支持黑暗主题,融入三维元素以增强深度和互动。