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 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.
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.