Componente de visualización de contenido
Un componente de visualización de contenido diseñado en un estilo skeuomórfico para el comercio electrónico con un tema oscuro. Exhibe productos con elementos mínimos, utilizando un esquema de color análogo para una estética agradable.
Código HTML
<div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
<div class="flex flex-col justify-center items-center">
<img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/500/300" alt="Product Image">
<div class="bg-white dark:bg-gray-800 p-4 rounded-b-lg w-full">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Product Name</h2>
<p class="text-gray-600 dark:text-gray-300">$29.99</p>
<p class="text-gray-700 dark:text-gray-300">A short description of the product goes here, detailing its features and benefits.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full border-2 border-gray-200 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<span class="text-gray-800 dark:text-gray-200 ml-2">Seller Name</span>
</div>
<button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-bold py-2 px-4 rounded hover:bg-blue-800 dark:hover:bg-blue-600">Add to Cart</button>
</div>
</div>
</div>Componentes relacionados
Componente Componentes de visualización de contenido
Un componente de visualización de contenido con microinteracciones, diseño responsivo y compatibilidad con temas oscuros mediante Tailwind CSS. Cuenta con efectos de desplazamiento sutiles y animaciones de enfoque en elementos interactivos.
Componente Componentes de visualización de contenido
Un componente de visualización de contenido receptivo con soporte de modo oscuro para sitios web comerciales/corporativos.
Componente de visualización de contenido
Un componente de visualización de contenido simple y receptivo diseñado en un estilo brutalista con colores complementarios. Adecuado para sitios web comerciales / corporativos, compatible con el modo oscuro.