Componente de mapa del sitio
Componente de mapa del sitio responsivo con microinteracciones, combinación de colores monocromática, diseño complejo, compatibilidad con temas oscuros y CSS de viento de cola.
Código HTML
<div class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen p-8">
<div class="max-w-4xl mx-auto">
<h1 class="text-3xl font-bold mb-8 text-center">Site Map</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Section 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
<h2 class="text-xl font-semibold mb-4 dark:text-white">Section 1</h2>
<ul>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 1.1</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 1.2</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 1.3</a>
</li>
</ul>
</div>
<!-- Section 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
<h2 class="text-xl font-semibold mb-4 dark:text-white">Section 2</h2>
<ul>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 2.1</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 2.2</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 2.3</a>
</li>
</ul>
</div>
<!-- Section 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
<h2 class="text-xl font-semibold mb-4 dark:text-white">Section 3</h2>
<ul>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 3.1</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 3.2</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 3.3</a>
</li>
</ul>
</div>
<!-- Section 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
<h2 class="text-xl font-semibold mb-4 dark:text-white">Section 4</h2>
<ul>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 4.1</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 4.2</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 4.3</a>
</li>
</ul>
</div>
<!-- Section 5 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
<h2 class="text-xl font-semibold mb-4 dark:text-white">Section 5</h2>
<ul>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 5.1</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 5.2</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 5.3</a>
</li>
</ul>
</div>
<!-- Section 6 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
<h2 class="text-xl font-semibold mb-4 dark:text-white">Section 6</h2>
<ul>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 6.1</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 6.2</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 6.3</a>
</li>
</ul>
</div>
</div>
</div>
</div>
Componentes relacionados
Componente de mapa del sitio
Un componente de mapa del sitio receptivo diseñado para el modo oscuro con colores pastel, adecuado para tableros.
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 de estilo retro/vintage con efectos responsivos y compatibilidad con temas oscuros.