Componente de mapa del sitio
Un componente de mapa del sitio neumórfico con diseño responsivo y compatibilidad con el modo oscuro.
Código HTML
<div class="container mx-auto p-4 bg-gray-200 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark rounded-lg">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Site Map</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
<h3 class="font-semibold text-gray-700 dark:text-gray-200">Section 1</h3>
<ul class="mt-2 space-y-2 text-gray-600 dark:text-gray-300">
<li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link 1</a></li>
<li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link 2</a></li>
<li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link 3</a></li>
</ul>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
<h3 class="font-semibold text-gray-700 dark:text-gray-200">Section 2</h3>
<ul class="mt-2 space-y-2 text-gray-600 dark:text-gray-300">
<li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link A</a></li>
<li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link B</a></li>
<li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link C</a></li>
</ul>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
<h3 class="font-semibold text-gray-700 dark:text-gray-200">Section 3</h3>
<ul class="mt-2 space-y-2 text-gray-600 dark:text-gray-300">
<li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Page X</a></li>
<li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Page Y</a></li>
<li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Page Z</a></li>
</ul>
</div>
</div>
</div>Componentes relacionados
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.
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
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.