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
Retro_Healthcare_Sitemap_Component
Un composant de sitemap simple et réactif avec une esthétique rétro/vintage, une palette de couleurs analogue, adapté aux applications de santé, y compris la prise en charge du mode sombre.
Composant de carte de site neumorphique
Un composant de plan de site complexe et réactif conçu dans un style neumorphe avec des tons de bijoux, adapté aux sites Web gouvernementaux ou de services publics, y compris la prise en charge du mode sombre.
Glassmorphism Composant de plan du site
Un composant de plan de site réactif avec un design de glassmorphism, une palette de couleurs analogue et une prise en charge du mode sombre, adapté aux sites Web d’entreprise et d’entreprise.