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
Componentes de visualización de contenido
Un portafolio de diseño 3D que muestra trabajos o productos con un esquema de color en escala de grises y un diseño receptivo, compatible con el modo oscuro.
Componentes de visualización de contenido
Un sencillo componente de visualización de contenido responsivo de estilo vintage para comercio electrónico, que utiliza un esquema de color monocromático y admite el modo oscuro.
Industrial_3D_Content_Display
Un componente de visualización de contenido simple y receptivo para empresas manufactureras/industriales, con un sutil diseño 3D que utiliza colores apagados y compatibilidad con el modo oscuro.