Componente Mappe 3D

Componente mappa 3D reattiva per siti Web aziendali con supporto per la modalità scura.

Anteprima

Codice HTML

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

Componenti correlati

Componente Mappe retrò

Un componente di mappe semplice e reattivo con un design retrò/vintage, una combinazione di colori analoga e il supporto per temi scuri, che utilizza Tailwind CSS. Adatto per blog o siti Web di contenuti.

Aperto

Componente Mappe

Un componente web progettato per le interfacce dei social media, caratterizzato da un design brutalista con una combinazione di colori in scala di grigi, adatto per la visualizzazione di mappe con posizioni contrassegnate.

Aperto

Neon_Glow_Maps_Component

Un componente mappa semplice e reattivo con un effetto neon/bagliore, progettato per i portfolio fotografici. Presenta colori neutri freddi, supporto per la modalità oscura e immagine della mappa segnaposto.

Aperto