Composant Cartes
Un composant Maps doté d’un design glassmorphism avec des effets réactifs et la prise en charge du thème sombre, utilisant Tailwind CSS.
HTML Code
<div class="flex justify-center items-center h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-6 max-w-lg w-full">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-100 mb-4">Our Locations</h2>
<div class="relative">
<img src="https://picsum.photos/600/400?random=1" alt="Map Image" class="rounded-lg" />
<div class="absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-white shadow-lg" />
<p class="text-sm text-gray-800 dark:text-gray-200 mt-2">Location A</p>
</div>
<div class="absolute top-1/4 right-1/4 w-full h-full flex flex-col justify-center items-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-white shadow-lg" />
<p class="text-sm text-gray-800 dark:text-gray-200 mt-2">Location B</p>
</div>
<div class="absolute bottom-0 left-1/4 w-full h-full flex flex-col justify-center items-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-white shadow-lg" />
<p class="text-sm text-gray-800 dark:text-gray-200 mt-2">Location C</p>
</div>
</div>
<div class="flex justify-between mt-4">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">View More</button>
<button class="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Contact Us</button>
</div>
</div>
</div>Composants associés
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.
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.
Composant Cartes
Un composant de carte simple et réactif avec une esthétique Material Design et une palette de couleurs de terre, avec prise en charge du mode sombre. Convient aux plates-formes de divertissement/médias pour afficher de manière ludique du contenu basé sur la localisation.