Componente Mappe
Un componente di mappe complesso progettato in stile Material Design, adatto per dashboard. Integra elementi reattivi, funzionalità interattive e supporta l'estetica della modalità oscura utilizzando una combinazione di colori analoga.
Codice 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>Componenti correlati
Componente Mappe Brutaliste
Un complesso componente di mappa per l'e-commerce in stile brutalista con colori monocromatici e supporto per la modalità oscura utilizzando Tailwind CSS. Mostra le posizioni dei prodotti con elementi di design brutalisti.
Componente Mappe
Un componente Maps reattivo con stile Material Design e supporto per temi scuri, creato utilizzando Tailwind CSS.
Componente Mappe
Un componente web progettato per le interfacce dei social media, caratterizzato da un design brutalista con una combinazione di colori in scala di grigi, adatto per la visualizzazione di mappe con posizioni contrassegnate.