Componente Mapas
Un componente de mapas complejo diseñado en estilo Material Design, adecuado para cuadros de mando. Integra elementos responsivos, funciones interactivas y admite la estética del modo oscuro utilizando un esquema de color análogo.
Código HTML
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Maps Overview</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/300/200?random=1" alt="Map 1" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-gray-800 dark:text-gray-200 text-md font-medium">City Map</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Interactive city map visualization.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/300/200?random=2" alt="Map 2" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-gray-800 dark:text-gray-200 text-md font-medium">Terrain Map</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Detailed terrain mapping for analysis.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/300/200?random=3" alt="Map 3" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-gray-800 dark:text-gray-200 text-md font-medium">Traffic Map</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Real-time traffic data and analytics.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/300/200?random=4" alt="Map 4" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-gray-800 dark:text-gray-200 text-md font-medium">Weather Map</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Interactive weather visualization.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/300/200?random=5" alt="Map 5" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-gray-800 dark:text-gray-200 text-md font-medium">Population Density Map</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Visual representation of population spread.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/300/200?random=6" alt="Map 6" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-gray-800 dark:text-gray-200 text-md font-medium">Resource Distribution Map</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Distribution of various resources across the region.</p>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de mapas brutalistas
Un complejo componente de mapa de comercio electrónico de estilo brutalista con colores monocromáticos y compatibilidad con el modo oscuro mediante Tailwind CSS. Muestra ubicaciones de productos con elementos de diseño brutalistas.
Gradient_Forest_Maps_Component
Un componente de mapa simple y receptivo para plataformas educativas, con una paleta de degradados verde bosque y transiciones suaves, con soporte para modo oscuro.