Componente Mapas 3D
Componente de mapa 3D receptivo para sitios web comerciales con soporte de modo oscuro.
Código HTML
<section class="py-10 text-gray-700 bg-gray-100 dark:bg-gray-800 dark:text-gray-300">
<div class="map-container container mx-auto px-4 relative" style="perspective: 1000px;">
<div class="map-element" style="transform: rotateX(20deg) rotateZ(-10deg);">
<!-- Replace with an actual map embed or a static image that looks like a map -->
<img src="https://picsum.photos/seed/map/800/600" alt="Company Location Map" class="w-full h-auto shadow-lg rounded-lg">
</div>
<div class="map-overlay absolute top-0 left-0 w-full h-full flex items-center justify-center">
<div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-xl text-center" style="transform: translateZ(50px);">
<h3 class="text-xl font-bold mb-2">Find Us</h3>
<p class="text-gray-600 dark:text-gray-400">123 Business St, Corporate City</p>
<a href="#" class="mt-4 inline-block bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded">Get Directions</a>
</div>
</div>
</div>
</section>Componentes relacionados
Componente de mapas lúdicos para juegos
Un componente de mapa simple, divertido y receptivo adecuado para sitios web de juegos, con tonos joya brillantes, elementos redondeados y soporte para modo oscuro.
Componente Mapas
Un componente de mapas complejo diseñado en estilo Material Design, adecuado para cuadros de mando. Integra elementos responsivos, funciones interactivas y admite la estética del modo oscuro utilizando un esquema de color análogo.
Componente Mapas
Un componente de mapa simple y receptivo con una estética de Material Design y un esquema de color de tono tierra, con soporte para el modo oscuro. Adecuado para plataformas de entretenimiento/medios de comunicación para mostrar contenido basado en la ubicación de forma lúdica.