Componente Mapas

Componente de mapas responsivo con soporte de modo oscuro usando Tailwind CSS.

Vista previa

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

Brutalism_Photography_Maps_Component

Un componente de mapa simple de estilo brutalista para portafolios de fotografía, con un esquema de color púrpura audaz con alto contraste y compatibilidad con modo oscuro.

Abrir

Componente de mapas retro

Un componente de mapas simple, receptivo y compatible con el modo oscuro con una estética retro/vintage, una combinación de colores vibrantes y un propósito comercial/corporativo, creado con Tailwind CSS.

Abrir

Neon_Glow_Maps_Component

Un componente de mapa simple y receptivo con un efecto de neón/resplandor, diseñado para portafolios de fotografía. Cuenta con colores neutros fríos, compatibilidad con el modo oscuro e imagen de mapa de marcador de posición.

Abrir