Componente Mapas
Un componente de mapas responsivo con elementos de diseño 3D y soporte de temas oscuros usando Tailwind CSS.
Código 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>Componentes relacionados
Componente Mapas
Componente de mapas con diseño de skeuomorfismo, combinación de colores triádica, complejidad moderada y propósito de redes sociales. Diseño responsivo con soporte para temas oscuros usando Tailwind CSS.
Componente Mapas 3D
Componente de mapa 3D receptivo para sitios web comerciales con soporte de modo oscuro.
Componente Mapas
Un componente de mapas responsivo diseñado con un estilo skeuomórfico, con suaves colores pastel y una interfaz rica adecuada para las redes sociales. El componente admite los modos claro y oscuro e incluye varios elementos interactivos.