Mise en page e-commerce avec conception 3D
Une mise en page de composant Web réactive pour le commerce électronique avec des éléments de conception 3D, incorporant une palette de couleurs complémentaires et la prise en charge du thème sombre. Il comporte des fiches de produits, une barre de navigation et un pied de page, le tout stylisé avec Tailwind CSS.
HTML Code
<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>Composants associés
Composants de mise en page
Un composant de mise en page de tableau de bord réactif qui utilise des micro-interactions et une palette de couleurs pastel, conçu pour afficher la visualisation des données et les panneaux de contrôle avec prise en charge du mode sombre.
Composant de mise en page 3D
Une mise en page de conception 3D simple, réactive et attrayante pour les sites Web d’entreprise/d’entreprise utilisant des couleurs vives, avec prise en charge du thème sombre.
RetroBusinessLayout
Un composant de mise en page à thème rétro/vintage pour les sites Web d’entreprise, avec une palette de couleurs en niveaux de gris et un design simple. Il est réactif et inclut la prise en charge du mode sombre.