一个复古/复古社交媒体组件,具有简单的布局和互补色彩方案。支持暗模式,并且响应式。
<div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-md max-w-sm mx-auto"> <div class="flex items-center mb-4"> <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"> <div class="text-gray-900 dark:text-white font-bold text-xl">User Name</div> </div> <p class="text-gray-700 dark:text-gray-300 text-base mb-4"> This is a sample social media post with a retro feel. #retro #tailwind </p> <img class="w-full rounded-lg mb-4" src="https://picsum.photos/400/300" alt="Sample Image"> <div class="flex justify-between items-center"> <div class="flex text-gray-700 dark:text-gray-300"> <span class="mr-2">❤️ 120</span> <span>💬 30</span> </div> <div class="text-blue-600 dark:text-blue-400 font-bold">View Comments</div> </div> </div>
一个复杂、充满活力的社交组件,用于博客/内容页面,专注于与分享按钮、点赞、评论和保存的微交互。包括完全响应和深色模式支持。
一个简单、响应式的 glassmorphism 社交卡片组件,具有柔和的色彩和深色模式支持,适用于仪表板界面。
复杂的社交组件部分,专为商业/企业网站设计,采用材料设计原则和灰度色彩方案。它具有响应式设计和黑暗主题支持。