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.
HTML Code
<div class="flex flex-col items-center justify-center bg-white dark:bg-gray-800 rounded-lg shadow-lg w-full max-w-xl p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Explore the Map</h2>
<div class="relative w-full h-64 rounded-lg overflow-hidden shadow-md transition-transform transform hover:scale-105">
<img src="https://picsum.photos/400/300?random=1" alt="Map" class="w-full h-full object-cover">
<div class="absolute inset-0 flex items-center justify-center">
<span class="bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-semibold px-2 py-1 rounded-full shadow-md">Current Location</span>
</div>
</div>
<div class="mt-4 w-full">
<h3 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-2">Connect with Friends</h3>
<div class="flex flex-wrap justify-between">
<div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-3 flex items-center mb-2 w-1/2 shadow-md">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
<div>
<p class="text-gray-800 dark:text-gray-200 font-bold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">@johndoe</p>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-3 flex items-center mb-2 w-1/2 shadow-md">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
<div>
<p class="text-gray-800 dark:text-gray-200 font-bold">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400">@janesmith</p>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-3 flex items-center mb-2 w-1/2 shadow-md">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
<div>
<p class="text-gray-800 dark:text-gray-200 font-bold">Alice Johnson</p>
<p class="text-gray-600 dark:text-gray-400">@alicejohnson</p>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Cartes
Composant Responsive Maps avec prise en charge du mode sombre à l’aide de Tailwind CSS.
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.