Diseño de comercio electrónico con diseño 3D
Un diseño de componente web responsivo para comercio electrónico con elementos de diseño 3D, que incorpora un esquema de color complementario y soporte para temas oscuros. Cuenta con tarjetas de producto, una barra de navegación y un pie de página, todo ello con el estilo de Tailwind CSS.
Código HTML
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
<nav class="flex justify-between items-center py-4">
<div class="text-2xl font-bold text-gray-900 dark:text-white">ShopLogo</div>
<ul class="flex space-x-4">
<li><a href="#" class="text-gray-800 dark:text-gray-300 hover:text-blue-500">Home</a></li>
<li><a href="#" class="text-gray-800 dark:text-gray-300 hover:text-blue-500">Products</a></li>
<li><a href="#" class="text-gray-800 dark:text-gray-300 hover:text-blue-500">Contact</a></li>
<li><a href="#" class="text-gray-800 dark:text-gray-300 hover:text-blue-500">Cart</a></li>
</ul>
</nav>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-200">
<img src="https://picsum.photos/200/200?random=1" alt="Product 1" class="rounded-t-lg w-full">
<div class="p-4">
<h2 class="font-bold text-xl text-gray-900 dark:text-white">Product 1</h2>
<p class="text-gray-700 dark:text-gray-300">$19.99</p>
<button class="mt-2 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">Add to Cart</button>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-200">
<img src="https://picsum.photos/200/200?random=2" alt="Product 2" class="rounded-t-lg w-full">
<div class="p-4">
<h2 class="font-bold text-xl text-gray-900 dark:text-white">Product 2</h2>
<p class="text-gray-700 dark:text-gray-300">$29.99</p>
<button class="mt-2 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">Add to Cart</button>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-200">
<img src="https://picsum.photos/200/200?random=3" alt="Product 3" class="rounded-t-lg w-full">
<div class="p-4">
<h2 class="font-bold text-xl text-gray-900 dark:text-white">Product 3</h2>
<p class="text-gray-700 dark:text-gray-300">$39.99</p>
<button class="mt-2 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">Add to Cart</button>
</div>
</div>
</div>
<footer class="mt-6 p-4 bg-gray-200 dark:bg-gray-600 rounded-lg text-center text-gray-800 dark:text-gray-300">
<p>© 2023 E-commerce Store. All rights reserved.</p>
</footer>
</div>Componentes relacionados
Diseño del panel de control de Glassmorphism
Un diseño simple de morfismo de vidrio para un tablero con elementos translúcidos similares al vidrio esmerilado, con un esquema de color pastel y compatibilidad con el modo oscuro.
Componentes de diseño
Un componente de diseño de panel receptivo que utiliza microinteracciones y un esquema de color pastel, diseñado para mostrar paneles de control y visualización de datos con soporte para modo oscuro.
Componente de diseño 3D
Un componente de diseño de redes sociales de diseño 3D receptivo con un esquema de color en escala de grises. Adecuado para interfaces de redes sociales.