Componente de mapa del sitio
Un componente de mapa del sitio adaptable diseñado con los principios de Material Design y optimizado para el comercio electrónico, con colores pastel y compatibilidad con el modo oscuro.
Código HTML
<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>Componentes relacionados
Componente de mapa del sitio
Un componente de mapa del sitio interactivo diseñado con los principios de Material Design, con diseños basados en cuadrícula, sombras y compatibilidad con el modo oscuro.
Componente de mapa del sitio
Un componente de mapa del sitio responsivo diseñado en modo oscuro con Tailwind CSS.
Componente de mapa del sitio
Un componente de mapa del sitio al estilo de Material Design para interfaces de redes sociales, con capacidad de respuesta y compatibilidad con el modo oscuro mediante Tailwind CSS. Incorpora tonos tierra y complejidad media para plataformas de redes sociales.