Composant de cartes d’affaires monochromatiques minimalistes
Un composant cartographique réactif et interactif conçu pour les sites Web d’entreprise et d’entreprise, avec un design plat minimaliste, une palette de couleurs monochromatiques et la prise en charge du mode sombre. Comprend une image de carte de repère fictif et des repères de contact pour les coordonnées.
HTML Code
<section class="py-16 sm:py-20 bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-4">
Find Us On The Map
</h2>
<p class="text-lg sm:xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
Visit our office or get in touch through our contact details below. We look forward to connecting with you.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
<!-- Map Placeholder -->
<div class="relative rounded-lg overflow-hidden shadow-xl dark:shadow-2xl aspect-video w-full">
<img src="https://picsum.photos/1200/800?grayscale&blur=2" alt="Placeholder map of our location" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/50 to-transparent"></div>
<div class="absolute bottom-4 left-4 right-4 p-4 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-md shadow-lg text-sm sm:text-base">
<p class="font-semibold text-gray-900 dark:text-white mb-1">Our Global Headquarters</p>
<p class="text-gray-700 dark:text-gray-300">123 Business Avenue, Suite 100, Metropolis City, Country 12345</p>
</div>
</div>
<!-- Contact Information -->
<div class="bg-white dark:bg-gray-800 p-8 sm:p-10 rounded-lg shadow-xl dark:shadow-2xl overflow-hidden">
<h3 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-6">
Get In Touch
</h3>
<ul class="space-y-6">
<li class="flex items-start">
<svg class="h-7 w-7 text-gray-500 dark:text-gray-400 mr-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<div>
<p class="font-semibold text-gray-900 dark:text-white text-lg">Address:</p>
<p class="text-gray-700 dark:text-gray-300">123 Maple Street, Business District, Cityville, State 01234</p>
</div>
</li>
<li class="flex items-start">
<svg class="h-7 w-7 text-gray-500 dark:text-gray-400 mr-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
<div>
<p class="font-semibold text-gray-900 dark:text-white text-lg">Phone:</p>
<a href="tel:+1234567890" class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors duration-200">+1 (234) 567-890</a>
</div>
</li>
<li class="flex items-start">
<svg class="h-7 w-7 text-gray-500 dark:text-gray-400 mr-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<div>
<p class="font-semibold text-gray-900 dark:text-white text-lg">Email:</p>
<a href="mailto:[email protected]" class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors duration-200">[email protected]</a>
</div>
</li>
</ul>
<div class="mt-8">
<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200">
Get Directions
<svg class="ml-3 -mr-1 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.525 17.525A7.989 7.989 0 0012 3c-4.418 0-8 3.582-8 8s3.582 8 8 8c2.072 0 3.999-.74 5.485-1.975L19 21l2-2-3.475-3.475z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</section>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.
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.