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.
HTML Code
<div class="bg-gray-200 dark:bg-gray-800 p-5 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-gray-800 dark:text-gray-200 text-xl font-semibold mb-4">Maps Dashboard</h2>
<div class="relative w-full h-64 rounded-lg overflow-hidden shadow-md">
<img src="https://picsum.photos/500/300?random=1" alt="Map Image" class="w-full h-full object-cover rounded-lg" />
<div class="absolute bottom-2 left-2 bg-gray-100 dark:bg-gray-700 bg-opacity-75 rounded-lg p-2">
<p class="text-gray-800 dark:text-gray-200">Location: New York City</p>
</div>
</div>
<div class="mt-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3" />
<div>
<p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Map Editor</p>
</div>
</div>
<div class="mt-2 flex justify-between">
<button class="bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-gray-200 py-1 px-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-500 transition">Edit</button>
<button class="bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-gray-200 py-1 px-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-500 transition">View</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.
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.
Paper_Print_Sepia_Sports_Map_Component
Il s’agit d’un composant réactif de type carte pour les applications de sport/fitness avec un design inspiré du papier/de l’impression et une palette de couleurs sépia/marron. Il comprend une zone de carte simulée, des épingles de localisation et une légende, avec une prise en charge complète du mode sombre.