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 de mapas de negocios monocromático minimalista
Un componente de mapa interactivo y receptivo diseñado para sitios web comerciales y corporativos, con un diseño plano minimalista, combinación de colores monocromática y compatibilidad con el modo oscuro. Incluye un marcador de posición, mapa, imagen y marcadores de posición de detalles de contacto.
Componente Mapas
Un componente de Maps con diseño de glassmorphism con efectos responsivos y compatibilidad con temas oscuros, que utiliza Tailwind CSS.
Componente Mapas
Un componente web diseñado para interfaces de redes sociales, con un diseño brutalista con un esquema de color en escala de grises, adecuado para mostrar mapas con ubicaciones marcadas.