CCHub Logo CCHub Tailwind Collection
Komponenten Landkarten Komponente "3D-Karten"

Komponente "3D-Karten"

Responsive 3D-Kartenkomponente für Unternehmenswebsites mit Unterstützung des Dunkelmodus.

Vorschau

HTML-Code 

<section class="py-10 text-gray-700 bg-gray-100 dark:bg-gray-800 dark:text-gray-300">
      <div class="map-container container mx-auto px-4 relative" style="perspective: 1000px;">
        <div class="map-element" style="transform: rotateX(20deg) rotateZ(-10deg);">
          <!-- Replace with an actual map embed or a static image that looks like a map -->
          <img src="https://picsum.photos/seed/map/800/600" alt="Company Location Map" class="w-full h-auto shadow-lg rounded-lg">
        </div>
        <div class="map-overlay absolute top-0 left-0 w-full h-full flex items-center justify-center">
          <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-xl text-center" style="transform: translateZ(50px);">
            <h3 class="text-xl font-bold mb-2">Find Us</h3>
            <p class="text-gray-600 dark:text-gray-400">123 Business St, Corporate City</p>
            <a href="#" class="mt-4 inline-block bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded">Get Directions</a>
          </div>
        </div>
      </div>
    </section>

Verwandte Komponenten

Maps-Komponente

Eine Maps-Komponente mit Glassmorphism-Design mit responsiven Effekten und Unterstützung für dunkle Themen, die Tailwind CSS verwendet.

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

Retro Maps-Komponente

Eine einfache, reaktionsschnelle und mit dem Dunkelmodus kompatible Kartenkomponente mit Retro-/Vintage-Ästhetik, lebendigem Farbschema und Geschäfts-/Unternehmenszwecken, die mit Tailwind CSS erstellt wurde.

Offen