Ficha de producto brutalista
Un sencillo componente interactivo de ficha de producto para e-commerce, con un diseño brutalista en escala de grises. Cuenta con una imagen del producto, título, precio y un botón 'Agregar al carrito'. El componente responde y es compatible con el modo oscuro. Se incluyen efectos de desplazamiento para la interactividad.
Código HTML
<div class="dark:bg-gray-900 bg-gray-100 p-4 font-mono antialiased flex items-center justify-center min-h-screen">
<div class="relative dark:bg-black bg-white border-2 border-black dark:border-white w-full max-w-sm mx-auto shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff]">
<div class="overflow-hidden border-b-2 border-black dark:border-white">
<img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-48 object-cover transition-transform duration-300 ease-in-out hover:scale-105">
</div>
<div class="p-4 relative">
<h3 class="text-xl dark:text-white text-black font-bold mb-2 uppercase">Product Title Here</h3>
<p class="text-black dark:text-gray-300 text-sm mb-4">A short and punchy description of the product, highlighting its brutalist appeal.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-2xl dark:text-white text-black font-extrabold">$99.99</span>
<button class="bg-black dark:bg-white text-white dark:text-black uppercase text-sm py-2 px-4 border-2 border-black dark:border-white font-bold hover:bg-gray-800 dark:hover:bg-gray-300 transition-colors duration-200 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">Add to Cart</button>
</div>
</div>
<div class="absolute -top-2 -right-2 bg-black dark:bg-white text-white dark:text-black px-2 py-1 text-xs font-bold uppercase border-2 border-black dark:border-white">New</div>
</div>
</div>Componentes relacionados
Componente de componentes interactivos
Componente de componentes interactivos de Material Design con efectos responsivos y soporte para temas oscuros.
Componente de componentes interactivos
Un componente interactivo con diseño Glassmorphism, combinación de colores pastel y diseño simple para el contenido del blog. Es responsivo e incluye soporte para modo oscuro.
Componente de Portafolio Interactivo
Un componente de cartera responsivo con microinteracciones y un esquema de color pastel, compatible con el modo oscuro con Tailwind CSS.