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
Un composant Maps réactif avec un style Material Design et une prise en charge du thème sombre, construit à l’aide de Tailwind CSS.
Composant Cartes
Un composant de cartes réactif conçu avec le style Glassmorphism, avec un thème sombre et des classes CSS Tailwind. Convient aux tableaux de bord avec visualisation des données et panneaux de contrôle.
Composant Cartes
Un composant de cartes complexe conçu dans le style Material Design, adapté aux tableaux de bord. Il intègre des éléments réactifs, des fonctionnalités interactives et prend en charge l’esthétique du mode sombre à l’aide d’un schéma de couleurs analogue.