Composant Cartes 3D

Composant de carte 3D réactif pour les sites Web d’entreprise avec prise en charge du mode sombre.

Aperçu

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>

Composants associés

Composant Cartes

Un composant de cartes réactif avec des éléments de conception 3D et la prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir

Composant Cartes

Un composant de carte complexe et dynamique pour les médias sociaux, avec des micro-interactions, un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir

Composant Cartes

Un composant de cartes réactives conçu dans un style skeuomorphe avec une palette de couleurs monochromatiques pour un tableau de bord, prenant en charge le mode sombre.

Ouvrir