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 de carte de tableau de bord brutaliste
Un composant de carte de tableau de bord de style brutaliste avec des couleurs vives, un contraste élevé, des éléments interactifs complexes, un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
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.
Composant Retro Maps
Un composant de cartes simple, réactif et compatible avec le mode sombre, avec une esthétique rétro/vintage, une palette de couleurs vives et un objectif professionnel/d’entreprise, construit avec Tailwind CSS.