CCHub Logo CCHub Tailwind Collection
Komponenten Landkarten Maps-Komponente

Maps-Komponente

Eine responsive Kartenkomponente, die im Glassmorphism-Stil entworfen wurde, mit einem dunklen Design und Tailwind-CSS-Klassen. Geeignet für Dashboards mit Datenvisualisierung und Bedienfeldern.

Vorschau

HTML-Code 

<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>

Verwandte Komponenten

IndustrieVibrantMapsComponent

Eine reaktionsschnelle und interaktive Kartenkomponente mit einer industriellen, rohen Ästhetik und einem lebendigen Farbschema, geeignet für Technologie-/SaaS-Anwendungen. Enthält Unterstützung für den Dunkelmodus.

Offen

Maps-Komponente

Kartenkomponente mit Skeuomorphismus-Design, triadischem Farbschema, mittlerer Komplexität und Social-Media-Zweck. Responsives Design mit Unterstützung für dunkle Themen mit Tailwind CSS.

Offen

Maps-Komponente

Eine reaktionsschnelle Kartenkomponente im skeuomorphen Stil mit sanften Pastellfarben und einer reichhaltigen Benutzeroberfläche, die für soziale Netzwerke geeignet ist. Die Komponente unterstützt sowohl den hellen als auch den dunklen Modus und enthält mehrere interaktive Elemente.

Offen