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
Add to Cart Button designed for Dark Mode UI with Earth tones color scheme, and complex complexity level, for Portfolio purpose. The component is responsive and supports dark theme using Tailwind's dark: prefix.
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.
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.