一个具有响应式设计和深色模式支持的野兽派卡片组件.
<div class="bg-white dark:bg-black border border-black dark:border-white p-6 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] max-w-sm mx-auto"> <img class="w-full h-48 object-cover border border-black dark:border-white mb-4" src="https://picsum.photos/seed/picsum/400/300" alt="Random image"> <h2 class="text-2xl font-bold text-black dark:text-white mb-2">Brutalist Card Title</h2> <p class="text-black dark:text-white mb-4">This is a description for the brutalist card component, showcasing a raw and bold design approach.</p> <div class="flex items-center mb-4"> <img class="w-10 h-10 rounded-full border border-black dark:border-white mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"> <span class="text-black dark:text-white">John Doe</span> </div> <button class="bg-black dark:bg-white text-white dark:text-black font-bold py-2 px-4 border border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white transition-colors duration-300">Read More</button> </div>
受拟物化设计启发,以下卡片组件完全响应,支持暗主题。对于暗模式,仅需 CSS 支持,无需 JavaScript。
一个使用Tailwind CSS设计的材料设计风格的卡片组件,具有响应式行为和暗模式支持。具有浮雕和涟漪效果的视觉提示。
适用于社交媒体界面的简约而充满活力的卡片组件,显示带有图像、点赞、评论和共享选项的用户帖子。它是完全响应的,并支持深色模式。