Componente Tarjetas de producto
Fichas de producto Componente para redes sociales con un esquema de color triádico oscuro y complejidad moderada. Utiliza Tailwind CSS para un diseño responsivo con soporte para modo oscuro, e incluye marcadores de posición para imágenes y avatares.
Código HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center p-4">
<h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-8">Social Media Product Cards</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/600/400" alt="Product Image">
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Cool Gadget Pro</h3>
<span class="text-lg font-bold text-teal-500 dark:text-teal-400">$299</span>
</div>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Elevate your digital experience with this cutting-edge gadget, featuring advanced capabilities.</p>
<div class="flex items-center mb-4">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<span class="text-gray-700 dark:text-gray-300 text-sm">By John Doe</span>
</div>
<div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
<span>❤️ 1.2K Likes</span>
<span>💬 245 Comments</span>
</div>
<button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-300">View Details</button>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/600/400" alt="Product Image">
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Smartwatch Elegance</h3>
<span class="text-lg font-bold text-rose-500 dark:text-rose-400">$179</span>
</div>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Stay connected and stylish with this elegant smartwatch, designed for modern living.</p>
<div class="flex items-center mb-4">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<span class="text-gray-700 dark:text-gray-300 text-sm">By Jane Smith</span>
</div>
<div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
<span>❤️ 980 Likes</span>
<span>💬 180 Comments</span>
</div>
<button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-300">View Details</button>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/600/400" alt="Product Image">
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Wireless Headphones</h3>
<span class="text-lg font-bold text-amber-500 dark:text-amber-400">$120</span>
</div>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Immerse yourself in rich audio with these comfortable and high-fidelity wireless headphones.</p>
<div class="flex items-center mb-4">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
<span class="text-gray-700 dark:text-gray-300 text-sm">By Peter Jones</span>
</div>
<div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
<span>❤️ 1.5K Likes</span>
<span>💬 300 Comments</span>
</div>
<button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-300">View Details</button>
</div>
</div>
</div>
</div>Componentes relacionados
Componente Tarjetas de producto
Componente de tarjeta de producto con estilo brutalista, combinación de colores monocromática, nivel de complejidad complejo para fines de comercio electrónico.
Tarjetas de productos Art Deco Candy
Un componente de tarjetas de producto receptivo con un diseño inspirado en el Art Deco y una alegre combinación de colores dulces, adecuado para sistemas de reserva y reservas. Incluye soporte para modo oscuro.
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.