HTML 代码
<div class="bg-stone-100 dark:bg-stone-900 p-4 sm:p-6 lg:p-8 font-sans antialiased text-stone-800 dark:text-stone-200">
<div class="max-w-xs mx-auto border-2 border-stone-400 dark:border-stone-700 rounded-lg overflow-hidden shadow-lg bg-stone-50 dark:bg-stone-800 transition-colors duration-300">
<div class="relative">
<img class="w-full h-32 object-cover object-center" src="https://picsum.photos/400/250?random=1" alt="News Article Cover">
<span class="absolute top-2 left-2 bg-amber-700 text-amber-50 text-xs px-2 py-1 rounded font-mono uppercase tracking-wide">News</span>
</div>
<div class="p-4">
<h3 class="text-lg font-bold text-amber-800 dark:text-amber-500 mb-2 leading-tight">Headline Connects Community Leaders</h3>
<p class="text-sm text-stone-600 dark:text-stone-400 mb-4 line-clamp-3">
Local officials and community organizers gathered today to discuss new initiatives aimed at fostering stronger neighborhood bonds and addressing pressing local issues.
</p>
<div class="flex items-center justify-between text-stone-500 dark:text-stone-400 text-xs">
<div class="flex items-center space-x-2">
<img class="w-6 h-6 rounded-full border border-stone-300 dark:border-stone-600" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Author Avatar">
<span class="font-medium">John Doe</span>
</div>
<span>Oct 26, 2023</span>
</div>
</div>
</div>
</div>相关组件
3D Social 作者卡片
具有 3D 效果和社交媒体链接的响应式作者卡片组件，专为博客/内容部分而设计。它具有互补的配色方案（蓝色用于身份/信息，橙色用于强调/CTA），支持深色模式，并使用 Tailwind CSS 进行样式设置。该设计是“简单”的复杂性，具有基本布局和最少的元素，但“3D 设计”通过使用阴影和悬停效果来增加深度和参与度。该组件包括头像、作者姓名、简短的个人简介、社交媒体图标和“Follow Me”行动号召按钮。它使用 randomuser.me 头像作为占位符。