CCHub Logo CCHub Tailwind Collection
Komponenten Landkarten Maps-Komponente

Maps-Komponente

Eine responsive Kartenkomponente mit 3D-Designelementen und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Vorschau

HTML-Code 

<div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
    <div class="max-w-6xl w-full mx-auto sm:px-6 lg:px-8">
        <div class="mt-8 overflow-hidden">
            <div class="grid grid-cols-1 md:grid-cols-2 items-center bg-white dark:bg-gray-800 overflow-hidden shadow transform transition-all duration-300 perspective-1000">
                <div class="p-6">
                    <div class="flex items-center">
                        <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500 dark:text-gray-400"><path d="M12 12l-2 10l-4 -14l9 -4 4 10L20 12 12 12z"></path></svg>
                        <div class="ml-4 text-lg leading-7 font-semibold"><a href="#" class="underline text-gray-900 dark:text-white">Interactive Map</a></div>
                    </div>

                    <div class="ml-12">
                        <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
                            Explore locations with our interactive 3D map. Discover new places and get directions easily.
                        </div>
                    </div>
                </div>

                <div class="relative w-full h-64 md:h-auto" style="transform: translateZ(20px);">
                     <img src="https://picsum.photos/seed/map-placeholder/600/400" alt="Map Placeholder" class="absolute inset-0 w-full h-full object-cover">
                </div>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

Maps-Komponente

Eine komplexe Kartenkomponente, die im Material Design-Stil entworfen wurde und für Dashboards geeignet ist. Es integriert reaktionsschnelle Elemente, interaktive Funktionen und unterstützt die Ästhetik des Dunkelmodus mit einem analogen Farbschema.

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

Maps-Komponente

Eine reaktionsfähige Kartenkomponente mit Neumorphism-Stil, Unterstützung für den Dunkelmodus und Platzhalterbild.

Offen