Componentes Fichas de producto Componente Tarjetas de producto

Componente Tarjetas de producto

Un componente de tarjeta de producto receptivo diseñado en un estilo minimalista con una combinación de colores pastel, adecuado para sitios web comerciales o corporativos, e incluye soporte para modo oscuro.

Vista previa

Código HTML

<div class="container mx-auto p-6">
    <h2 class="text-2xl font-semibold mb-6 text-gray-800 dark:text-gray-200">Product Cards</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
            <div class="p-4">
                <img src="https://picsum.photos/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-md">
            </div>
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <div class="flex items-center justify-between">
                    <span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
                    <button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
            <div class="p-4">
                <img src="https://picsum.photos/300/201" alt="Product Image" class="w-full h-48 object-cover rounded-md">
            </div>
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <div class="flex items-center justify-between">
                    <span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
                    <button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
            <div class="p-4">
                <img src="https://picsum.photos/300/202" alt="Product Image" class="w-full h-48 object-cover rounded-md">
            </div>
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <div class="flex items-center justify-between">
                    <span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
                    <button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
            <div class="p-4">
                <img src="https://picsum.photos/300/203" alt="Product Image" class="w-full h-48 object-cover rounded-md">
            </div>
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <div class="flex items-center justify-between">
                    <span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
                    <button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

Componentes relacionados

Componente Tarjetas de producto

Un componente de tarjetas de producto responsivo diseñado en un estilo brutalista con Tailwind CSS, con soporte para temas oscuros y uso de imágenes de marcador de posición.

Abrir

Tarjetas de productos Art Deco Candy

Un componente de tarjetas de producto receptivo con un diseño inspirado en el Art Deco y una alegre combinación de colores dulces, adecuado para sistemas de reserva y reservas. Incluye soporte para modo oscuro.

Abrir

Componente Tarjetas de producto

Un componente de tarjetas de producto complejo y receptivo para plataformas de entretenimiento/medios, con un diseño orgánico/inspirado en la naturaleza que utiliza una paleta de colores bosque/verde. Incluye soporte para modo oscuro y elementos interactivos.

Abrir