Composant de plan du site
Un composant de plan de site réactif conçu selon les principes de Material Design et optimisé pour le commerce électronique, avec des couleurs pastel et la prise en charge du mode sombre.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-md shadow-md">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-100">Site Map</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="p-4 bg-blue-100 dark:bg-blue-900 rounded shadow">
<h3 class="font-semibold text-lg text-blue-800 dark:text-blue-200">Products</h3>
<ul class="mt-2">
<li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">New Arrivals</a></li>
<li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Featured</a></li>
<li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Best Sellers</a></li>
<li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Sales</a></li>
</ul>
</div>
<div class="p-4 bg-green-100 dark:bg-green-900 rounded shadow">
<h3 class="font-semibold text-lg text-green-800 dark:text-green-200">Categories</h3>
<ul class="mt-2">
<li><a href="#" class="text-green-600 dark:text-green-400 hover:underline">Men</a></li>
<li><a href="#" class="text-green-600 dark:text-green-400 hover:underline">Women</a></li>
<li><a href="#" class="text-green-600 dark:text-green-400 hover:underline">Kids</a></li>
<li><a href="#" class="text-green-600 dark:text-green-400 hover:underline">Accessories</a></li>
</ul>
</div>
<div class="p-4 bg-pink-100 dark:bg-pink-900 rounded shadow">
<h3 class="font-semibold text-lg text-pink-800 dark:text-pink-200">Support</h3>
<ul class="mt-2">
<li><a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Customer Service</a></li>
<li><a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Returns</a></li>
<li><a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">FAQs</a></li>
<li><a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Contact Us</a></li>
</ul>
</div>
</div>
<div class="mt-8">
<h3 class="font-semibold text-lg text-gray-800 dark:text-gray-100">User Profile</h3>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="ml-3">
<p class="text-gray-800 dark:text-gray-100">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
</div>
</div>
</div>
<div class="mt-6">
<h3 class="font-semibold text-lg text-gray-800 dark:text-gray-100">Featured Image</h3>
<img src="https://picsum.photos/300/200" alt="Featured" class="mt-2 rounded-md shadow">
</div>
</div>Composants associés
Composant de plan du site
Composant de plan de site avec design minimaliste/plat, effets réactifs et prise en charge du thème sombre.
Composant de plan du site
Composant de plan de site réactif avec prise en charge du mode sombre pour le commerce électronique. Utilise Tailwind CSS pour le coiffage. Suit une palette de couleurs analogue. Images de picsum.photos.
Composant de plan du site
Un composant de plan de site de style 3D avec un design réactif et une prise en charge du mode sombre. Il comporte des éléments tridimensionnels pour plus de profondeur et d’engagement, en utilisant des images et des avatars aléatoires.