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.
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
Composant Cartes
Composant Maps avec conception Skeuomorphism, schéma de couleurs triadique, complexité modérée et objectif de médias sociaux. Conception réactive avec prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Cartes
Un composant Maps réactif avec le style Neumorphism, la prise en charge du mode sombre et l’image de remplacement.
Composante Brutalist Maps
Un composant de carte e-commerce complexe, de style brutaliste, avec des couleurs monochromes et une prise en charge du mode sombre à l’aide de Tailwind CSS. Il affiche les emplacements des produits avec des éléments de design brutalistes.