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.
Código HTML
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg dark:shadow-gray-700 transition duration-300">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Site Map</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Home</h3>
<p class="text-gray-600 dark:text-gray-400">Welcome to our website!</p>
<img src="https://picsum.photos/200/100?random=1" alt="Home Image" class="mt-2 rounded-md">
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">About Us</h3>
<p class="text-gray-600 dark:text-gray-400">Learn more about our team.</p>
<img src="https://picsum.photos/200/100?random=2" alt="About Us Image" class="mt-2 rounded-md">
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Services</h3>
<p class="text-gray-600 dark:text-gray-400">What we offer to our clients.</p>
<img src="https://picsum.photos/200/100?random=3" alt="Services Image" class="mt-2 rounded-md">
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Contact</h3>
<p class="text-gray-600 dark:text-gray-400">Reach out to us anytime.</p>
<img src="https://picsum.photos/200/100?random=4" alt="Contact Image" class="mt-2 rounded-md">
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Blog</h3>
<p class="text-gray-600 dark:text-gray-400">Read our latest articles.</p>
<img src="https://picsum.photos/200/100?random=5" alt="Blog Image" class="mt-2 rounded-md">
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">FAQ</h3>
<p class="text-gray-600 dark:text-gray-400">Find answers to your questions.</p>
<img src="https://picsum.photos/200/100?random=6" alt="FAQ Image" class="mt-2 rounded-md">
</div>
</div>
</div>Componentes relacionados
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.
Componente de mapa del sitio
Un componente de mapa del sitio receptivo con microinteracciones, combinación de colores pastel y soporte para temas oscuros, adecuado para sitios web de comercio electrónico. Incluye un encabezado, una barra de búsqueda y varias categorías con enlaces.
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.