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.
HTML Code
<div class="bg-white bg-opacity-20 backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-50 rounded-lg p-6 shadow-lg overflow-hidden">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Dashboard</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white bg-opacity-40 backdrop-blur-md dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Map View</h3>
<img src="https://picsum.photos/600/300" alt="Map" class="rounded-lg w-full" />
</div>
<div class="bg-white bg-opacity-40 backdrop-blur-md dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">User Statistics</h3>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-12 h-12 mr-4" />
<div>
<p class="text-sm text-gray-600 dark:text-gray-300">John Doe</p>
<p class="text-xl font-semibold text-gray-800 dark:text-gray-200">150 Visits</p>
</div>
</div>
</div>
</div>
<div class="mt-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Map Controls</h3>
<div class="flex justify-between mt-2">
<button class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">Zoom In</button>
<button class="bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800">Zoom Out</button>
</div>
</div>
</div>Composants associés
Composant Cartes
Un composant de cartes réactives conçu avec un style skeuomorphe, avec des couleurs pastel douces et une interface riche adaptée aux réseaux sociaux. Le composant prend en charge les modes clair et sombre et comprend plusieurs éléments interactifs.
Luxury_Autumn_Maps_Component
Un composant de carte réactif et élégant conçu pour les sites Web de voyage et de tourisme de luxe, avec des couleurs d’automne et une prise en charge du mode sombre.
Composant Cartes
Composant Responsive Maps avec prise en charge du mode sombre à l’aide de Tailwind CSS.