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 reaktionsschnelle, kartenähnliche Komponente, die für Bildungsplattformen entwickelt wurde, mit interaktiven Elementen und sanften Pastellfarben mit Unterstützung für den Dunkelmodus. Konzentriert sich auf Mikrointeraktionen wie subtile Schwebevorgänge und aktive Zustände.

Offen

Maps-Komponente

Eine responsive Kartenkomponente, die mit Neumorphismus formatiert ist, dunkles Design unterstützt und Platzhalterbilder enthält.

Offen

Luxury_Autumn_Maps_Component

Eine reaktionsschnelle und elegante Kartenkomponente, die für Luxusreise- und Tourismus-Websites entwickelt wurde, mit Herbstfarben und Unterstützung für den Dunkelmodus.

Offen