Componente Mapas
Un componente de Mapas simple con diseño de Glassmorphism, esquema de color en escala de grises y un diseño simple. Es sensible y admite el modo oscuro.
Código HTML
<div class="relative flex items-center justify-center w-full h-96 bg-gray-300 dark:bg-gray-700 overflow-hidden" style="backdrop-filter: blur(10px); background-color: rgba(209, 213, 219, 0.3); dark:background-color: rgba(55, 65, 81, 0.3);">
<div class="absolute inset-0 z-0">
<img src="https://picsum.photos/seed/maps/800/600" alt="Map background" class="object-cover w-full h-full">
</div>
<div class="relative z-10 p-6 bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 rounded-lg shadow-lg text-center">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Find Us Here</h2>
<p class="text-gray-700 dark:text-gray-300">Our location on the map.</p>
</div>
</div>Componentes relacionados
Componente Mapas
Un componente de mapas responsivo diseñado con el estilo Glassmorphism, con un tema oscuro y clases CSS de Tailwind. Adecuado para cuadros de mando con visualización de datos y paneles de control.
Componente Mapas 3D
Componente de mapa 3D receptivo para sitios web comerciales con soporte de 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.