组件 价格显示 价格显示组件

价格显示组件

一个响应式价格显示组件,采用复古/复古美学和鲜艳的颜色,适用于社交媒体界面,并支持深色模式。

预览

HTML 代码

<div class="max-w-xs mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="p-5">
        <img src="https://picsum.photos/300/200" alt="Product Image" class="w-full h-40 object-cover rounded-md mb-4">
        <div class="flex items-center mb-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
            <div class="ml-3">
                <h2 class="text-lg text-violet-600 dark:text-violet-400 font-bold">John Doe</h2>
                <span class="text-sm text-gray-600 dark:text-gray-300">@johndoe</span>
            </div>
        </div>
        <h3 class="text-2xl text-red-600 dark:text-red-400 font-semibold mb-2">$49.99</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4">Original Vintage T-Shirt from the 80s.</p>
        <button class="w-full bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 rounded hover:bg-blue-600 dark:hover:bg-blue-600 transition duration-200">Add to Cart</button>
    </div>
</div>

相关组件

价格显示组件

一种具有复古/古典美学的价格显示组件,具有响应设计和深色模式支持。

打开

价格显示组件

一个响应式价格显示组件,采用新拟态风格和互补的配色方案,专为支持黑暗模式的博客内容设计。

打开

价格显示组件

新拟态风格的价格显示组件,具有响应效果和黑暗主题支持。

打开