Componente de mapa del sitio
Un componente de mapa del sitio de estilo 3D con diseño responsivo y compatibilidad con el modo oscuro. Cuenta con elementos tridimensionales para mayor profundidad y compromiso, utilizando imágenes y avatares de marcadores de posición aleatorios.
Código HTML
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg max-w-4xl mx-auto p-6">
<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-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Home</h3>
<img src="https://picsum.photos/200/100?random=1" alt="Home Image" class="rounded-lg mt-2">
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">About Us</h3>
<img src="https://picsum.photos/200/100?random=2" alt="About Us Image" class="rounded-lg mt-2">
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Services</h3>
<img src="https://picsum.photos/200/100?random=3" alt="Services Image" class="rounded-lg mt-2">
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Contact</h3>
<img src="https://picsum.photos/200/100?random=4" alt="Contact Image" class="rounded-lg mt-2">
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Blog</h3>
<img src="https://picsum.photos/200/100?random=5" alt="Blog Image" class="rounded-lg mt-2">
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Portfolio</h3>
<img src="https://picsum.photos/200/100?random=6" alt="Portfolio Image" class="rounded-lg mt-2">
</div>
</div>
</div>Componentes relacionados
Componente de mapa del sitio
Componente de mapa del sitio receptivo con soporte de modo oscuro para comercio electrónico. Utiliza Tailwind CSS para el estilo. Sigue un esquema de color análogo. Imágenes de picsum.photos.
Componente Mapa del Sitio - Finanzas Banca
Un componente de mapa del sitio simple y receptivo para interfaces financieras/bancarias, con una interfaz de usuario de modo oscuro con tonos sepia/marrón. Optimizado para computadoras de escritorio, tabletas y dispositivos móviles, con soporte completo para el modo oscuro.
Componente de mapa del sitio
Un componente de mapa del sitio simple y receptivo para sitios de comercio electrónico con colores vibrantes y microinteracciones, y soporte para modo oscuro.