Composants Cartes Composant Cartes

Composant Cartes

Un composant Maps simple avec un design Glassmorphism, une palette de couleurs en niveaux de gris et une mise en page simple. Il est réactif et prend en charge le mode sombre.

Aperçu

HTML Code

<div class="relative flex items-center justify-center w-full h-96 bg-gray-300 dark:bg-gray-700 overflow-hidden" style="backdrop-filter: blur(10px); background-color: rgba(209, 213, 219, 0.3); dark:background-color: rgba(55, 65, 81, 0.3);">
  <div class="absolute inset-0 z-0">
    <img src="https://picsum.photos/seed/maps/800/600" alt="Map background" class="object-cover w-full h-full">
  </div>
  <div class="relative z-10 p-6 bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 rounded-lg shadow-lg text-center">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Find Us Here</h2>
    <p class="text-gray-700 dark:text-gray-300">Our location on the map.</p>
  </div>
</div>

Composants associés

Paper_Print_Sepia_Sports_Map_Component

Il s’agit d’un composant réactif de type carte pour les applications de sport/fitness avec un design inspiré du papier/de l’impression et une palette de couleurs sépia/marron. Il comprend une zone de carte simulée, des épingles de localisation et une légende, avec une prise en charge complète du mode sombre.

Ouvrir

Composant de cartes d’affaires monochromatiques minimalistes

Un composant cartographique réactif et interactif conçu pour les sites Web d’entreprise et d’entreprise, avec un design plat minimaliste, une palette de couleurs monochromatiques et la prise en charge du mode sombre. Comprend une image de carte de repère fictif et des repères de contact pour les coordonnées.

Ouvrir

Composant Cartes

Un composant de cartes réactives de style neumorphisme, prenant en charge le thème sombre et présentant des images de remplacement.

Ouvrir