Composant Cartes
Un composant Maps réactif avec le style Neumorphism, la prise en charge du mode sombre et l’image de remplacement.
HTML Code
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maps Component</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.neumorphism-card {
border-radius: 20px;
background: #e0e0e0;
box-shadow: 7px 7px 15px #bebebe,
-7px -7px 15px #ffffff;
transition: all 0.3s ease;
}
.neumorphism-card:hover {
box-shadow: 5px 5px 10px #bebebe,
-5px -5px 10px #ffffff;
}
.dark .neumorphism-card {
background: #333333;
box-shadow: 7px 7px 15px #2b2b2b,
-7px -7px 15px #3b3b3b;
}
.dark .neumorphism-card:hover {
box-shadow: 5px 5px 10px #2b2b2b,
-5px -5px 10px #3b3b3b;
}
</style>
</head>
<body class="bg-gray-200 dark:bg-gray-800 p-8">
<div class="neumorphism-card max-w-sm mx-auto overflow-hidden md:max-w-md dark:text-white">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:w-48" src="https://images.unsplash.com/photo-1594399418882-cf049f2a25c3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="Map image">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold dark:text-indigo-300">Location</div>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline dark:text-white">Central Park</a>
<p class="mt-2 text-gray-500 dark:text-gray-400">A large urban park in New York City.</p>
<div class="mt-4 flex items-center">
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
</svg>
<span class="ml-2 text-gray-500 dark:text-gray-400">New York, NY</span>
</div>
</div>
</div>
</div>
</body>
</html>Composants associés
Composant Cartes
Un composant de carte simple et réactif avec une esthétique Material Design et une palette de couleurs de terre, avec prise en charge du mode sombre. Convient aux plates-formes de divertissement/médias pour afficher de manière ludique du contenu basé sur la localisation.
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 de carte skeuomorphe
Un composant de carte simple et réactif avec un design skeuomorphe, une palette de couleurs de terre et une prise en charge du mode sombre, adapté à un portfolio.