Components Add to Cart Button Add to Cart Button Component 46

Add to Cart Button Component 46

A retro/vintage 'Add to Cart' button component designed with Tailwind CSS, featuring responsive design and support for dark themes.

Preview

HTML Code

<div class="flex flex-col items-center justify-center p-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="w-full h-auto rounded-md mb-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Retro Product Name</h2>
    <p class="text-gray-600 dark:text-gray-300 mb-4">This is a brief description of the retro product.</p>
    <div class="flex items-center space-x-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
        <button class="px-4 py-2 font-semibold text-white bg-blue-600 rounded-lg shadow hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600">Add to Cart</button>
    </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.

Open

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.

Open

Add to Cart Button

Add to Cart Button Component with Minimalist/Flat Design, Grayscale color scheme, Complex complexity level, for Dashboard purpose, with responsive design and dark theme support.

Open