Componente Tarjetas de producto
Un componente de tarjeta de producto responsivo con un estilo de diseño Skeuomorphism, una combinación de colores en tonos tierra e interacciones complejas, adecuado para una cartera. Incluye soporte para temas oscuros y utiliza Tailwind CSS para el estilo. Las imágenes provienen de picsum.photos y los avatares de randomuser.me.
Código HTML
<div class="bg-stone-100 dark:bg-stone-900 min-h-screen p-8 flex flex-wrap items-center justify-center font-sans">
<!-- Product Card 1 -->
<div class="w-full md:w-1/2 lg:w-1/3 p-4">
<div class="bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 rounded-3xl shadow-2xl p-8 transform transition-transform duration-500 hover:scale-105 hover:shadow-stone-500/50 dark:hover:shadow-stone-900/50 border-t border-l border-stone-200 dark:border-stone-700 relative overflow-hidden">
<div class="absolute inset-0 bg-pattern-texture opacity-10 pointer-events-none"></div>
<div class="relative z-10">
<img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="rounded-2xl mb-6 shadow-xl border border-stone-500">
<h2 class="text-3xl font-extrabold text-stone-800 dark:text-stone-100 mb-3 text-center tracking-wide">Earthen Vessel</h2>
<p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-6 text-center">Hand-crafted ceramic vessel, ideal for home decor or as a unique gift. Each piece is organically formed and fired to perfection.</p>
<div class="flex items-center justify-center mb-6">
<div class="flex items-center space-x-2 text-yellow-600 dark:text-yellow-400">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<span class="text-stone-800 dark:text-stone-200 text-lg font-semibold">4.9</span>
<span class="text-stone-600 dark:text-stone-400 text-md">(128 Reviews)</span>
</div>
</div>
<div class="flex justify-around items-center mb-6">
<div class="text-stone-800 dark:text-stone-100">
<span class="block text-sm opacity-80">Dimensions:</span>
<span class="text-lg font-bold">15x10 cm</span>
</div>
<div class="text-stone-800 dark:text-stone-100 text-center">
<span class="block text-sm opacity-80">Weight:</span>
<span class="text-lg font-bold">0.8 kg</span>
</div>
<div class="text-stone-800 dark:text-stone-100 text-center">
<span class="block text-sm opacity-80">Material:</span>
<span class="text-lg font-bold">Clay</span>
</div>
</div>
<div class="flex items-center justify-between mb-8 pb-4 border-b border-stone-400/50 dark:border-stone-600/50">
<div class="flex items-center -space-x-3">
<img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer Avatar">
<img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Customer Avatar">
<img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/men/47.jpg" alt="Customer Avatar">
<span class="text-stone-700 dark:text-stone-300 text-sm pl-2">+25 Happy customers</span>
</div>
<span class="text-4xl font-extrabold text-stone-900 dark:text-stone-50">$79.00</span>
</div>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center">
<button class="px-8 py-4 rounded-xl text-lg font-bold text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 shadow-lg shadow-green-700/40 dark:shadow-green-600/40 transform active:scale-95 transition-all duration-200 border-b-2 border-green-900 dark:border-green-800">
Add to Cart
</button>
<button class="px-8 py-4 rounded-xl text-lg font-bold text-stone-800 dark:text-stone-200 bg-stone-200 hover:bg-stone-300 dark:bg-stone-600 dark:hover:bg-stone-500 shadow-lg shadow-stone-400/40 dark:shadow-stone-800/40 transform active:scale-95 transition-all duration-200 border-b-2 border-stone-400 dark:border-stone-700">
View Details
</button>
</div>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="w-full md:w-1/2 lg:w-1/3 p-4">
<div class="bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 rounded-3xl shadow-2xl p-8 transform transition-transform duration-500 hover:scale-105 hover:shadow-stone-500/50 dark:hover:shadow-stone-900/50 border-t border-l border-stone-200 dark:border-stone-700 relative overflow-hidden">
<div class="absolute inset-0 bg-pattern-texture opacity-10 pointer-events-none"></div>
<div class="relative z-10">
<img src="https://picsum.photos/400/300?random=2" alt="Product Image" class="rounded-2xl mb-6 shadow-xl border border-stone-500">
<h2 class="text-3xl font-extrabold text-stone-800 dark:text-stone-100 mb-3 text-center tracking-wide">Rustic Planter</h2>
<p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-6 text-center">A robust planter crafted from recycled oak barrels, perfect for adding a touch of nature indoors or out.</p>
<div class="flex items-center justify-center mb-6">
<div class="flex items-center space-x-2 text-yellow-600 dark:text-yellow-400">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<span class="text-stone-800 dark:text-stone-200 text-lg font-semibold">4.7</span>
<span class="text-stone-600 dark:text-stone-400 text-md">(95 Reviews)</span>
</div>
</div>
<div class="flex justify-around items-center mb-6">
<div class="text-stone-800 dark:text-stone-100">
<span class="block text-sm opacity-80">Dimensions:</span>
<span class="text-lg font-bold">50x40 cm</span>
</div>
<div class="text-stone-800 dark:text-stone-100 text-center">
<span class="block text-sm opacity-80">Weight:</span>
<span class="text-lg font-bold">5.2 kg</span>
</div>
<div class="text-stone-800 dark:text-stone-100 text-center">
<span class="block text-sm opacity-80">Material:</span>
<span class="text-lg font-bold">Oak Wood</span>
</div>
</div>
<div class="flex items-center justify-between mb-8 pb-4 border-b border-stone-400/50 dark:border-stone-600/50">
<div class="flex items-center -space-x-3">
<img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/women/55.jpg" alt="Customer Avatar">
<img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/men/62.jpg" alt="Customer Avatar">
<img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Customer Avatar">
<span class="text-stone-700 dark:text-stone-300 text-sm pl-2">+18 Happy customers</span>
</div>
<span class="text-4xl font-extrabold text-stone-900 dark:text-stone-50">$120.00</span>
</div>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center">
<button class="px-8 py-4 rounded-xl text-lg font-bold text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 shadow-lg shadow-green-700/40 dark:shadow-green-600/40 transform active:scale-95 transition-all duration-200 border-b-2 border-green-900 dark:border-green-800">
Add to Cart
</button>
<button class="px-8 py-4 rounded-xl text-lg font-bold text-stone-800 dark:text-stone-200 bg-stone-200 hover:bg-stone-300 dark:bg-stone-600 dark:hover:bg-stone-500 shadow-lg shadow-stone-400/40 dark:shadow-stone-800/40 transform active:scale-95 transition-all duration-200 border-b-2 border-stone-400 dark:border-stone-700 ">
View Details
</button>
</div>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="w-full md:w-1/2 lg:w-1/3 p-4">
<div class="bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 rounded-3xl shadow-2xl p-8 transform transition-transform duration-500 hover:scale-105 hover:shadow-stone-500/50 dark:hover:shadow-stone-900/50 border-t border-l border-stone-200 dark:border-stone-700 relative overflow-hidden">
<div class="absolute inset-0 bg-pattern-texture opacity-10 pointer-events-none"></div>
<div class="relative z-10">
<img src="https://picsum.photos/400/300?random=3" alt="Product Image" class="rounded-2xl mb-6 shadow-xl border border-stone-500">
<h2 class="text-3xl font-extrabold text-stone-800 dark:text-stone-100 mb-3 text-center tracking-wide">Terra Cotta Mug</h2>
<p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-6 text-center">A charming terra cotta mug, perfect for your morning coffee or evening tea. Hand-painted with natural dyes.</p>
<div class="flex items-center justify-center mb-6">
<div class="flex items-center space-x-2 text-yellow-600 dark:text-yellow-400">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<span class="text-stone-800 dark:text-stone-200 text-lg font-semibold">4.6</span>
<span class="text-stone-600 dark:text-stone-400 text-md">(72 Reviews)</span>
</div>
</div>
<div class="flex justify-around items-center mb-6">
<div class="text-stone-800 dark:text-stone-100">
<span class="block text-sm opacity-80">Dimensions:</span>
<span class="text-lg font-bold">10x8 cm</span>
</div>
<div class="text-stone-800 dark:text-stone-100 text-center">
<span class="block text-sm opacity-80">Weight:</span>
<span class="text-lg font-bold">0.3 kg</span>
</div>
<div class="text-stone-800 dark:text-stone-100 text-center">
<span class="block text-sm opacity-80">Material:</span>
<span class="text-lg font-bold">Terra Cotta</span>
</div>
</div>
<div class="flex items-center justify-between mb-8 pb-4 border-b border-stone-400/50 dark:border-stone-600/50">
<div class="flex items-center -space-x-3">
<img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/men/78.jpg" alt="Customer Avatar">
<img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/women/81.jpg" alt="Customer Avatar">
<img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/men/84.jpg" alt="Customer Avatar">
<span class="text-stone-700 dark:text-stone-300 text-sm pl-2">+10 Happy customers</span>
</div>
<span class="text-4xl font-extrabold text-stone-900 dark:text-stone-50">$25.00</span>
</div>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center">
<button class="px-8 py-4 rounded-xl text-lg font-bold text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 shadow-lg shadow-green-700/40 dark:shadow-green-600/40 transform active:scale-95 transition-all duration-200 border-b-2 border-green-900 dark:border-green-800">
Add to Cart
</button>
<button class="px-8 py-4 rounded-xl text-lg font-bold text-stone-800 dark:text-stone-200 bg-stone-200 hover:bg-stone-300 dark:bg-stone-600 dark:hover:bg-stone-500 shadow-lg shadow-stone-400/40 dark:shadow-stone-800/40 transform active:scale-95 transition-all duration-200 border-b-2 border-stone-400 dark:border-stone-700">
View Details
</button>
</div>
</div>
</div>
</div>
<!-- You might need to add this to your tailwind.config.js for the texture pattern -->
<style>
.bg-pattern-texture {
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.1'%3E%3Cpath fill-rule='evenodd' d='M0 0h10v10H0V0zm10 0h10v10H10V0zM0 10h10v10H0V10zm10 10h10v-10H10v10z'/%3E%3C/g%3E%3C/svg%3E");
}
.dark .bg-pattern-texture {
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath fill-rule='evenodd' d='M0 0h10v10H0V0zm10 0h10v10H10V0zM0 10h10v10H0V10zm10 10h10v-10H10v10z'/%3E%3C/g%3E%3C/svg%3E");
}
</style>
</div>Componentes relacionados
Componente Tarjetas de producto
Un componente de tarjeta de producto responsivo diseñado en estilo Material Design, con una combinación de colores en escala de grises. Incluye una imagen, un título, una descripción y un botón con soporte para el modo oscuro mediante Tailwind CSS.
Componente Tarjetas de producto
Un componente simple de tarjeta de producto de comercio electrónico diseñado en estilo Material Design utilizando un esquema de color en escala de grises y un diseño receptivo con soporte para temas oscuros.
Fichas de producto Componente 52
Un componente de tarjeta de producto receptivo que utiliza el estilo de diseño Glassmorphism con soporte para temas oscuros y Tailwind CSS.