Componente Mappe
Un componente Mappe reattivo con elementi di progettazione 3D e supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
<div class="max-w-6xl w-full mx-auto sm:px-6 lg:px-8">
<div class="mt-8 overflow-hidden">
<div class="grid grid-cols-1 md:grid-cols-2 items-center bg-white dark:bg-gray-800 overflow-hidden shadow transform transition-all duration-300 perspective-1000">
<div class="p-6">
<div class="flex items-center">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500 dark:text-gray-400"><path d="M12 12l-2 10l-4 -14l9 -4 4 10L20 12 12 12z"></path></svg>
<div class="ml-4 text-lg leading-7 font-semibold"><a href="#" class="underline text-gray-900 dark:text-white">Interactive Map</a></div>
</div>
<div class="ml-12">
<div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
Explore locations with our interactive 3D map. Discover new places and get directions easily.
</div>
</div>
</div>
<div class="relative w-full h-64 md:h-auto" style="transform: translateZ(20px);">
<img src="https://picsum.photos/seed/map-placeholder/600/400" alt="Map Placeholder" class="absolute inset-0 w-full h-full object-cover">
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente Mappe retrò
Un componente di mappe semplice e reattivo con un design retrò/vintage, una combinazione di colori analoga e il supporto per temi scuri, che utilizza Tailwind CSS. Adatto per blog o siti Web di contenuti.
Componente Mappe
Un componente di mappe complesso progettato in stile Material Design, adatto per dashboard. Integra elementi reattivi, funzionalità interattive e supporta l'estetica della modalità oscura utilizzando una combinazione di colori analoga.
Componente Mappe
Un componente web progettato per le interfacce dei social media, caratterizzato da un design brutalista con una combinazione di colori in scala di grigi, adatto per la visualizzazione di mappe con posizioni contrassegnate.