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 de redes sociales
Un componente de mapa del sitio simple y receptivo para interfaces de redes sociales con tonos sepia/marrones y compatibilidad con el modo oscuro, con sutiles microinteracciones al pasar el mouse.
Neumorphic_Industrial_Sitemap
Un componente de mapa de sitio neumórfico receptivo para empresas industriales y manufactureras, con un esquema de color monocromático y soporte para modo oscuro. Los elementos parecen sobresalir del fondo mediante sombras sutiles.
Neumorphic_Real_Estate_Sitemap_Component
Un componente de mapa del sitio neumórfico simple y receptivo para plataformas inmobiliarias con un esquema de colores de arco iris degradado y soporte para modo oscuro.