Añadir al carrito Componente de botón
Un componente de botón receptivo "Agregar al carrito" diseñado con los principios de Material Design, con un esquema de color triádico y compatible con el modo oscuro. Diseñado para su uso en el cuadro de mandos, incluye un selector de cantidad e integra efectos de profundidad utilizando Tailwind CSS para sombras y animaciones.
Código HTML
<div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
<div class="flex flex-col md:flex-row items-center bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl space-y-4 md:space-y-0 md:space-x-6 w-full max-w-2xl transform transition-all duration-300 hover:shadow-2xl">
<div class="flex-shrink-0 w-32 h-32 md:w-48 md:h-48 rounded-lg overflow-hidden shadow-md dark:shadow-lg">
<img src="https://picsum.photos/seed/addtocart/400/400" alt="Product Image" class="w-full h-full object-cover">
</div>
<div class="flex-grow text-center md:text-left">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Awesome Product Name</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">A brief description of the amazing product that will enhance your life.</p>
<div class="flex items-center justify-center md:justify-start mb-4">
<span class="text-3xl font-extrabold text-indigo-600 dark:text-teal-400">$29.99</span>
<span class="text-lg text-gray-500 dark:text-gray-400 line-through ml-2">$39.99</span>
</div>
<div class="flex items-center justify-center md:justify-start space-x-3 mb-4">
<label for="quantity" class="text-gray-700 dark:text-gray-300 font-medium">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" value="1" class="w-20 p-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-teal-400">
</div>
<button class="w-full md:w-auto px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md transition-all duration-300 hover:bg-indigo-700 dark:bg-teal-500 dark:hover:bg-teal-600 focus:outline-none focus:ring-4 focus:ring-indigo-500 dark:focus:ring-teal-400 focus:ring-opacity-50 transform hover:-translate-y-0.5 active:scale-95">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 0a2 2 0 100 4 2 2 0 000-4z" />
</svg>
Add to Cart
</button>
<div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
<p>Estimated delivery: <span class="font-bold">3-5 business days</span></p>
<p>In stock: <span class="font-bold text-green-500">Yes</span></p>
</div>
</div>
</div>
</div>Componentes relacionados
Botón Añadir a la cesta
Un componente de botón Agregar al carrito de diseño 3D con efectos responsivos y soporte de tema oscuro usando Tailwind CSS.
Skeuomorphic Añadir al carrito Botón
Botón Skeuomórfico Agregar al carrito con colores vibrantes para un sitio web de portafolio, con un diseño complejo con elementos interactivos y soporte de modo oscuro receptivo usando Tailwind CSS.
Añadir al carrito Componente de botón
Un componente de botón "Agregar al carrito" de color caramelo inspirado en la naturaleza, diseñado para una plataforma de foro/comunidad, con un estilo fluido y orgánico. Es responsivo y admite el modo oscuro.