Composant Cartes
Un composant Maps réactif avec un style Material Design et une prise en charge du thème sombre, construit à l’aide de Tailwind CSS.
HTML Code
<div class="h-screen flex flex-col bg-gray-100 dark:bg-gray-900">
<!-- Header -->
<header class="bg-white dark:bg-gray-800 shadow-md">
<div class="container mx-auto px-4 py-4 flex items-center justify-between">
<h1 class="text-xl font-semibold text-gray-800 dark:text-white">Maps</h1>
<nav>
<ul class="flex space-x-4">
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Explore</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Saved</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contribute</a></li>
</ul>
</nav>
</div>
</header>
<!-- Main Content -->
<main class="flex-grow container mx-auto px-[10px] py-4 grid grid-cols-1 md:grid-cols-3 gap-4">
<!-- Map Area (Placeholder) -->
<section class="md:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="h-[400px] bg-gray-300 dark:bg-gray-700 flex items-center justify-center text-gray-600 dark:text-gray-300">
Map will be loaded here
</div>
</section>
<!-- Sidebar/Details Area -->
<aside class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Location Details</h2>
<div class="space-y-4">
<!-- Example Detail Item -->
<div class="flex items-center space-x-3">
<div class="flex-shrink-0 w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold">I</div>
<p class="text-gray-700 dark:text-gray-300">Information about the location.</p>
</div>
<div class="flex items-center space-x-3">
<div class="flex-shrink-0 w-10 h-10 bg-green-500 rounded-full flex items-center justify-center text-white font-bold">P</div>
<p class="text-gray-700 dark:text-gray-300">Photos and imagery here.</p>
</div>
<div class="flex items-center space-x-3">
<div class="flex-shrink-0 w-10 h-10 bg-red-500 rounded-full flex items-center justify-center text-white font-bold">R</div>
<p class="text-gray-700 dark:text-gray-300">Reviews and ratings go here.</p>
</div>
</div>
</aside>
</main>
<!-- Footer -->
<footer class="bg-white dark:bg-gray-800 shadow-md mt-4">
<div class="container mx-auto px-4 py-4 text-center text-gray-600 dark:text-gray-300">
© 2023 Maps Component
</div>
</footer>
</div>Composants associés
Composant Retro Maps
Un composant de cartes simple et réactif avec un design rétro/vintage, une palette de couleurs analogue et une prise en charge du thème sombre, utilisant Tailwind CSS. Convient aux blogs ou aux sites Web de contenu.
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 Cartes 3D
Composant de carte 3D réactif pour les sites Web d’entreprise avec prise en charge du mode sombre.