Add to Cart Button Component
A responsive 'Add to Cart' button designed in dark mode using Tailwind CSS, with hover effects and dark theme support.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-900 text-white">
<div class="flex flex-col items-center bg-gray-800 p-6 rounded-lg shadow-lg">
<img src="https://picsum.photos/200/300" alt="Product Image" class="w-full h-auto rounded-lg mb-4" />
<h2 class="text-lg font-semibold mb-2">Product Name</h2>
<p class="text-gray-400 mb-4">Short description of the product goes here.</p>
<div class="flex items-center justify-between w-full">
<span class="text-xl font-bold">$19.99</span>
<button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">
Add to Cart
</button>
</div>
</div>
</div>
Related Components
Add to Cart Button Component
A retro/vintage styled 'Add to Cart' button component for e-commerce applications. This button has a nostalgic design inspired by the 80s and 90s, using an analogous color scheme and featuring effects for interactivity. It's responsive and supports dark themes.
Add to Cart Button Component
A complex, skeuomorphic 'Add to Cart' button component designed for gaming interfaces, featuring an analogous color scheme and full responsiveness with dark mode support.
Add to Cart Button Component
A responsive Add to Cart Button component designed in a Brutalist style with vibrant colors, suitable for social media interfaces with dark theme support.