Componentes Fichas de producto Componente Tarjetas de producto

Componente Tarjetas de producto

Un componente de tarjeta de producto de estilo brutalismo con alto contraste, efectos responsivos y compatibilidad con el modo oscuro.

Vista previa

Código HTML

<div class="flex flex-wrap justify-center space-x-4 space-y-4 p-5 bg-gray-100 dark:bg-gray-800">
    <div class="max-w-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 shadow overflow-hidden transition-transform transform hover:scale-105">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/pic1/400/300" alt="Product Image">
        <div class="p-4">
            <h2 class="font-bold text-xl text-gray-900 dark:text-white">Product Title</h2>
            <p class="text-gray-700 dark:text-gray-400">This is a brief description of the product, explaining its features and benefits.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-gray-800 dark:text-gray-200 font-bold text-lg">$29.99</span>
                <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring">Add to Cart</button>
            </div>
        </div>
    </div>
    <div class="max-w-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 shadow overflow-hidden transition-transform transform hover:scale-105">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/pic2/400/300" alt="Product Image">
        <div class="p-4">
            <h2 class="font-bold text-xl text-gray-900 dark:text-white">Product Title</h2>
            <p class="text-gray-700 dark:text-gray-400">This is a brief description of the product, explaining its features and benefits.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-gray-800 dark:text-gray-200 font-bold text-lg">$39.99</span>
                <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring">Add to Cart</button>
            </div>
        </div>
    </div>
    <div class="max-w-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 shadow overflow-hidden transition-transform transform hover:scale-105">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/pic3/400/300" alt="Product Image">
        <div class="p-4">
            <h2 class="font-bold text-xl text-gray-900 dark:text-white">Product Title</h2>
            <p class="text-gray-700 dark:text-gray-400">This is a brief description of the product, explaining its features and benefits.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-gray-800 dark:text-gray-200 font-bold text-lg">$49.99</span>
                <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring">Add to Cart</button>
            </div>
        </div>
    </div>
</div>

Componentes relacionados

Componente Tarjetas de producto

Un componente de tarjeta de producto receptivo con microinteracciones en tonos tierra, que proporciona soporte de tema oscuro para la exhibición de portafolios.

Abrir

Componente Tarjetas de producto

Un componente de tarjeta de producto simple y receptivo con microinteracciones, diseñado para interfaces de redes sociales que usan Tailwind CSS, compatible con tema oscuro y esquema de color en escala de grises.

Abrir

Componente Tarjetas de producto

Componente de tarjetas de producto skeuomórficas para tablero con diseño receptivo y soporte de tema oscuro.

Abrir