Componente de mapa del sitio
Un componente de mapa del sitio responsivo diseñado en modo oscuro con Tailwind CSS.
Código HTML
<div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4">Site Map</h2>
<ul class="space-y-3">
<li class="hover:text-gray-400 transition duration-300">
<a href="#" class="flex items-center space-x-2">
<img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
<span>Home</span>
</a>
</li>
<li class="hover:text-gray-400 transition duration-300">
<a href="#" class="flex items-center space-x-2">
<img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
<span>About Us</span>
</a>
</li>
<li class="hover:text-gray-400 transition duration-300">
<a href="#" class="flex items-center space-x-2">
<img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
<span>Services</span>
</a>
</li>
<li class="hover:text-gray-400 transition duration-300">
<a href="#" class="flex items-center space-x-2">
<img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
<span>Contact</span>
</a>
</li>
<li class="hover:text-gray-400 transition duration-300">
<a href="#" class="flex items-center space-x-2">
<img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
<span>Privacy Policy</span>
</a>
</li>
</ul>
<div class="mt-5">
<h3 class="text-xl font-semibold">Follow Us</h3>
<ul class="flex space-x-4 mt-2">
<li><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-8 h-8" /></li>
<li><img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="rounded-full w-8 h-8" /></li>
<li><img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full w-8 h-8" /></li>
</ul>
</div>
</div>
Componentes relacionados
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.
Neumorfismo Vibrante Componente de mapa del sitio
Un componente de mapa del sitio simple y receptivo diseñado con un estilo neumórfico y un esquema de colores vibrantes, adecuado para documentación o sitios wiki. Incluye soporte para modo oscuro.
Componente de mapa del sitio
Un componente complejo del mapa del sitio que implementa un estilo de diseño de skeuomorfismo con una combinación de colores de tonos tierra, que admite un tema oscuro. Diseñado para fines de blog/contenido con elementos interactivos, utilizando Tailwind CSS.