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