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
A responsive Add to Cart button component designed in a skeuomorphic style, with vibrant colors and dark theme support, suitable for social media interfaces.
Add to Cart Button Component
A responsive 'Add to Cart' button component with triadic colors, microinteraction focus, and dark mode support for e-commerce applications.
Brutalism Pastel Add to Cart Button
Brutalism-inspired Add to Cart button with a pastel color scheme, moderate complexity, and responsive design with dark mode support. Suitable for a blog or content website.