组件 添加到购物车按钮 添加到购物车按钮组件

添加到购物车按钮组件

一个为深色模式设计的响应式“添加到购物车”按钮,使用 Tailwind CSS。

预览

HTML 代码

<div class="flex items-center justify-center p-10 bg-gray-900 min-h-screen">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6">
        <div class="flex items-center">
            <img src="https://picsum.photos/100" alt="Product Image" class="w-16 h-16 rounded-lg mr-4">
            <div class="text-white">
                <h2 class="text-lg font-semibold">Product Name</h2>
                <p class="text-gray-400">Product description goes here.</p>
                <p class="text-xl font-bold mt-2">$29.99</p>
            </div>
        </div>
        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-200 ease-in-out">
            Add to Cart
        </button>
    </div>
</div>

相关组件

添加到购物车按钮组件

一个使用 Tailwind CSS 设计的响应式“添加到购物车”按钮,采用深色模式,具有悬停效果和深色主题支持。

打开

加入购物车按钮

一个3D设计的添加到购物车按钮组件,具有响应式效果和深色主题支持,使用 Tailwind CSS。

打开

加入购物车按钮组件

添加到购物车按钮,专为深色模式 UI 设计,具有大地色调配色方案和复杂复杂度级别,用于投资组合。该组件是响应式的,并使用 Tailwind 的 dark: 前缀支持深色主题。

打开