Componente Mappe
Un componente Maps reattivo progettato con lo stile Glassmorphism, con un tema scuro e classi CSS Tailwind. Adatto per cruscotti con visualizzazione dei dati e pannelli di controllo.
Codice HTML
<div class="bg-white bg-opacity-20 backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-50 rounded-lg p-6 shadow-lg overflow-hidden">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Dashboard</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white bg-opacity-40 backdrop-blur-md dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Map View</h3>
<img src="https://picsum.photos/600/300" alt="Map" class="rounded-lg w-full" />
</div>
<div class="bg-white bg-opacity-40 backdrop-blur-md dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">User Statistics</h3>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-12 h-12 mr-4" />
<div>
<p class="text-sm text-gray-600 dark:text-gray-300">John Doe</p>
<p class="text-xl font-semibold text-gray-800 dark:text-gray-200">150 Visits</p>
</div>
</div>
</div>
</div>
<div class="mt-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Map Controls</h3>
<div class="flex justify-between mt-2">
<button class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">Zoom In</button>
<button class="bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800">Zoom Out</button>
</div>
</div>
</div>Componenti correlati
Componente Mappe
Un componente Maps con design glassmorphism con effetti reattivi e supporto per temi scuri, che utilizza Tailwind CSS.
Neon_Glow_Maps_Component
Un componente mappa semplice e reattivo con un effetto neon/bagliore, progettato per i portfolio fotografici. Presenta colori neutri freddi, supporto per la modalità oscura e immagine della mappa segnaposto.
Componente Mappe
Un componente reattivo simile a una mappa progettato per piattaforme educative, con elementi interattivi e tenui colori pastello con supporto per la modalità scura. Si concentra su microinterazioni come passaggi sospesi sottili e stati attivi.