Componente de mapa del sitio
Un componente de mapa del sitio de estilo retro/vintage con efectos responsivos y compatibilidad con temas oscuros.
Código HTML
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-3xl mx-auto mt-10">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-4">Site Map</h2>
<ul class="space-y-4">
<li class="bg-gray-100 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between">
<div class="flex items-center">
<img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full mr-3">
<span class="text-gray-600 dark:text-gray-300">Home</span>
</div>
<a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">Visit</a>
</li>
<li class="bg-gray-100 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between">
<div class="flex items-center">
<img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full mr-3">
<span class="text-gray-600 dark:text-gray-300">About Us</span>
</div>
<a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">Visit</a>
</li>
<li class="bg-gray-100 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between">
<div class="flex items-center">
<img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full mr-3">
<span class="text-gray-600 dark:text-gray-300">Services</span>
</div>
<a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">Visit</a>
</li>
<li class="bg-gray-100 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between">
<div class="flex items-center">
<img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full mr-3">
<span class="text-gray-600 dark:text-gray-300">Contact</span>
</div>
<a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">Visit</a>
</li>
</ul>
</div>Componentes relacionados
Componente de mapa del sitio
Un componente de mapa del sitio interactivo diseñado con morfismo de vidrio, con un efecto translúcido y desenfoque similar al vidrio esmerilado para un portafolio que muestra trabajos o productos. Admite un tema oscuro y utiliza colores complementarios mientras mantiene una complejidad moderada.
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 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.