交互式组件

一个 Web 组件,设计为具有拟物化元素,适用于社交媒体界面,具有互补的配色方案和深色主题支持。

预览

HTML 代码

<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg flex flex-col lg:flex-row">
    <div class="flex-shrink-0 mb-4 lg:mb-0 lg:mr-4">
        <img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
    </div>
    <div class="flex-1">
        <h2 class="text-white dark:text-gray-200 text-xl font-bold">John Doe</h2>
        <p class="text-gray-400 dark:text-gray-500 text-sm mb-2">@john_doe</p>
        <p class="text-gray-300 dark:text-gray-400 mb-4">Here’s a glimpse of my recent adventures! 🗺️</p>
        <img class="w-full h-64 object-cover rounded-lg mb-4" src="https://picsum.photos/800/400?random=1" alt="Adventure Image">
        <div class="flex justify-between">
            <button class="bg-blue-500 dark:bg-blue-600 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-700 transition duration-300">Like</button>
            <button class="bg-green-500 dark:bg-green-600 text-white font-semibold py-2 px-4 rounded hover:bg-green-600 dark:hover:bg-green-700 transition duration-300">Comment</button>
            <button class="bg-red-500 dark:bg-red-600 text-white font-semibold py-2 px-4 rounded hover:bg-red-600 dark:hover:bg-red-700 transition duration-300">Share</button>
        </div>
    </div>
</div>

相关组件

社交媒体互动组件

一个复杂的社交媒体组件,具有带有霓虹灯/发光效果的森林/绿色调色板,适用于具有多个元素的交互式源。包括响应式设计和深色模式支持。

打开

交互组件

一个受野兽派启发的博客交互式组件,具有高对比度大地色调、响应式设计和深色模式支持。

打开

野兽派产品卡

用于电子商务的简单交互式产品卡组件,具有灰度的粗野主义设计。它具有产品图片、标题、价格和“添加到购物车”按钮。该组件响应迅速,并支持深色模式。包含悬停效果以实现交互性。

打开