Composant Cartes
Un composant Web conçu pour les interfaces de médias sociaux, doté d’un design brutaliste avec une palette de couleurs en niveaux de gris, adapté à l’affichage de cartes avec des emplacements marqués.
HTML Code
<div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg dark:bg-gray-800 max-w-2xl mx-auto">
<h2 class="text-2xl font-bold mb-4">Maps Component</h2>
<div class="relative mb-5">
<img src="https://picsum.photos/600/400" alt="Map" class="w-full h-64 object-cover rounded-md mb-2">
<div class="absolute left-4 top-4 bg-black bg-opacity-50 p-2 rounded">Location 1</div>
<div class="absolute left-24 top-20 bg-black bg-opacity-50 p-2 rounded">Location 2</div>
<div class="absolute left-10 top-36 bg-black bg-opacity-50 p-2 rounded">Location 3</div>
</div>
<div class="flex flex-col space-y-3">
<h3 class="text-lg font-semibold">Locations</h3>
<div class="flex items-center bg-gray-700 p-3 rounded shadow dark:bg-gray-600">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-bold">User 1</p>
<p class="text-sm">Location 1 Description</p>
</div>
</div>
<div class="flex items-center bg-gray-700 p-3 rounded shadow dark:bg-gray-600">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-bold">User 2</p>
<p class="text-sm">Location 2 Description</p>
</div>
</div>
<div class="flex items-center bg-gray-700 p-3 rounded shadow dark:bg-gray-600">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-bold">User 3</p>
<p class="text-sm">Location 3 Description</p>
</div>
</div>
</div>
<button class="mt-5 bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded dark:bg-gray-700 dark:hover:bg-gray-600">View More</button>
</div>Composants associés
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.
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.
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.