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.
Código HTML
<div class="container mx-auto p-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/201" alt="Product Image">
<div class="p-6">
<h2 class="text-lg font-bold text-gray-800 dark:text-white">Product Title 1</h2>
<p class="text-gray-600 dark:text-gray-400">This is a short description of the product.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<p class="ml-2 text-gray-800 dark:text-white">Seller Name</p>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/202" alt="Product Image">
<div class="p-6">
<h2 class="text-lg font-bold text-gray-800 dark:text-white">Product Title 2</h2>
<p class="text-gray-600 dark:text-gray-400">This is a short description of the product.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
<p class="ml-2 text-gray-800 dark:text-white">Seller Name</p>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/203" alt="Product Image">
<div class="p-6">
<h2 class="text-lg font-bold text-gray-800 dark:text-white">Product Title 3</h2>
<p class="text-gray-600 dark:text-gray-400">This is a short description of the product.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
<p class="ml-2 text-gray-800 dark:text-white">Seller Name</p>
</div>
</div>
</div>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-gray-800 {
background-color: #2d3748;
}
.text-gray-600 {
color: #a0aec0;
}
.border-gray-300 {
border-color: #4a5568;
}
}
</style>Componentes relacionados
Componente Tarjetas de producto
Un componente de tarjetas de producto receptivo diseñado con estilo de skeuomorfismo, combinación de colores de tonos tierra y compatibilidad con temas oscuros. Ideal para cuadros de mando.
Componente Tarjetas de producto
Un componente de tarjetas de producto receptivo con microinteracciones, que utiliza un esquema de color en escala de grises y admite el modo oscuro. Ideal para fines de blog o consumo de contenido.
Componente Tarjetas de producto
Un componente de tarjetas de producto de estilo brutalista con efectos responsivos y soporte de temas oscuros utilizando Tailwind CSS.