Componente Mapas
Componente de mapas responsivo con soporte de modo oscuro usando Tailwind CSS.
Código HTML
<div class="bg-gray-900 text-gray-200 p-8 min-h-screen flex flex-col items-center justify-center">
<h2 class="text-2xl font-bold mb-6 text-teal-300">My Location</h2>
<div class="w-full max-w-md rounded-lg shadow-lg overflow-hidden">
<div class="relative" style="padding-bottom: 56.25%;"><!-- 16:9 Aspect Ratio -->
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1dYOUR_LATITUDE_LONGITUDE!2dYOUR_LONGITUDE!3dYOUR_LATITUDE!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zM8KwMDAnMDAuMCJTIDc4wrAwMCcwMC4wIlc!5e0!3m2!1sen!2sus!4vYOUR_GENERATED_ID"
width="100%"
height="100%"
style="border:0;"
allowfullscreen=""
loading="lazy"
class="absolute top-0 left-0"
></iframe>
</div>
</div>
<p class="mt-4 text-sm text-gray-400">Replace "YOUR_LATITUDE_LONGITUDE" and "YOUR_LONGITUDE" and "YOUR_LATITUDE" and "YOUR_GENERATED_ID" with your actual map details.</p>
</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
Un componente de mapas responsivo con elementos de diseño 3D y soporte de temas oscuros usando Tailwind CSS.
Componente de mapa del tablero de Brutalist
Un componente de mapa de tablero de estilo brutalista con colores vibrantes, alto contraste, elementos interactivos complejos, diseño receptivo y soporte de temas oscuros con Tailwind CSS.