Componentes Fichas de producto Componente Tarjetas de producto

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.

Vista previa

Código HTML

<div class="flex flex-col max-w-xs mx-auto rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
    <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="text-lg font-semibold text-gray-800 dark:text-white transition-colors duration-300">Product Title</h2>
        <p class="mt-1 text-gray-600 dark:text-gray-300 transition-colors duration-300">Brief description of the product. Engaging text to attract users.</p>
        <div class="flex items-center mt-3">
            <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <span class="ml-2 text-gray-700 dark:text-gray-200 transition-colors duration-300">User Name</span>
        </div>
    </div>
</div>
<div class="mt-4">
    <button class="w-full py-2 px-4 bg-gray-800 text-white rounded hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500 transition-colors duration-300">Add to Cart</button>
</div>

Componentes relacionados

Componente de tarjetas de productos neumórficas - Paleta retro

Un componente de tarjetas de producto complejo y receptivo diseñado con un estilo de interfaz de usuario neumórfico suave, que utiliza una paleta de colores retro/vintage apagados. Las características incluyen soporte para modo oscuro, sombras sutiles para el efecto de extrusión y HTML semántico para la accesibilidad. Adecuado para la lectura y el consumo de contenido, como un blog o la visualización de contenido.

Abrir

Componente de tarjetas de producto skeuomórficas

Componente de tarjetas de producto simple y receptivo con un diseño esqueuomórfico en escala de grises, adecuado para sitios web comerciales / corporativos. Incluye soporte para modo oscuro.

Abrir

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