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 diseñado con los principios de Material Design utilizando Tailwind CSS, con diseños responsivos, animaciones y compatibilidad con temas oscuros.
Componente de mapa del sitio Glassmorphism
Un componente de mapa del sitio responsivo con un diseño de cristal, combinación de colores análoga y compatibilidad con modo oscuro, adecuado para sitios web comerciales y corporativos.
Industrial_Site_Map_Component
Un componente de mapa del sitio para sitios web de agricultura/ganadería con una estética de diseño industrial, que utiliza neutros cálidos. Cuenta con diseño responsivo, soporte para modo oscuro y secciones de enlaces interactivos.