Componenti Mappe Componente Mappe

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.

Anteprima

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

3D_Neon_Maps_Component

Un complesso componente di mappe ispirato al 3D con una combinazione di colori neon/elettrico, adatto per un portfolio per mostrare luoghi o progetti. È dotato di elementi luminosi, un'interfaccia utente ricca di interattività e una reattività completa con il supporto della modalità oscura.

Aperto

Brutalism_Photography_Maps_Component

Un semplice componente cartografico in stile brutalista per portfolio fotografici, caratterizzato da un'audace combinazione di colori viola con contrasto elevato e supporto per la modalità scura.

Aperto

Luxury_Autumn_Maps_Component

Un componente di mappa reattivo ed elegante progettato per siti Web di viaggi e turismo di lusso, con colori autunnali e supporto per la modalità scura.

Aperto