Componentes Mapas Componente Mapas

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.

Vista previa

Código HTML

<div class="p-4 md:p-8 lg:p-12 bg-stone-100 dark:bg-stone-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl rounded-2xl shadow-xl dark:shadow-2xl overflow-hidden bg-white dark:bg-stone-800 transition-colors duration-300 ease-in-out">
    <!-- Map Header -->
    <div class="relative h-48 sm:h-64 md:h-80 bg-gradient-to-br from-stone-500 to-stone-700 dark:from-stone-700 dark:to-stone-900 overflow-hidden flex items-center justify-center p-4">
      <img src="https://picsum.photos/1000/600?grayscale&blur=5" alt="Abstract Map Background" class="absolute inset-0 w-full h-full object-cover opacity-30">
      <div class="relative z-10 text-center">
        <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-white mb-2">Explore New Horizons</h2>
        <p class="text-stone-200 text-sm sm:text-base">Discover captivating places, near and far.</p>
      </div>
      <button class="absolute top-4 right-4 bg-white/20 hover:bg-white/30 text-white rounded-full p-2 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 transition-colors duration-200">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
      </button>
    </div>

    <!-- Map Content Area -->
    <div class="p-4 sm:p-6 lg:p-8">
      <div class="mb-6">
        <h3 class="text-xl sm:text-2xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Popular Destinations</h3>
        <p class="text-stone-600 dark:text-stone-300 text-sm">Hand-picked locations entertainment enthusiasts love.</p>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
        <!-- Location Card 1 -->
        <div class="bg-stone-50 dark:bg-stone-700 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden">
          <img src="https://picsum.photos/300/200?random=1" alt="Placeholder Image for Location 1" class="w-full h-32 object-cover">
          <div class="p-3">
            <h4 class="text-lg font-medium text-stone-800 dark:text-stone-100 mb-1">Mystic Lake</h4>
            <p class="text-sm text-stone-500 dark:text-stone-400">A serene spot for nature documentaries.</p>
            <a href="#" class="mt-2 inline-block text-amber-600 dark:text-amber-400 hover:underline text-sm font-medium">View Map</a>
          </div>
        </div>

        <!-- Location Card 2 -->
        <div class="bg-stone-50 dark:bg-stone-700 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden">
          <img src="https://picsum.photos/300/200?random=2" alt="Placeholder Image for Location 2" class="w-full h-32 object-cover">
          <div class="p-3">
            <h4 class="text-lg font-medium text-stone-800 dark:text-stone-100 mb-1">Ancient Ruins</h4>
            <p class="text-sm text-stone-500 dark:text-stone-400">Ideal for historical drama series.</p>
            <a href="#" class="mt-2 inline-block text-amber-600 dark:text-amber-400 hover:underline text-sm font-medium">View Map</a>
          </div>
        </div>
      </div>

      <!-- Call to Action / Footer -->
      <div class="mt-8 pt-6 border-t border-stone-200 dark:border-stone-600 text-center">
        <p class="text-stone-600 dark:text-stone-300 text-sm mb-4">Can't find what you're looking for?</p>
        <button class="px-6 py-3 bg-amber-600 hover:bg-amber-700 text-white font-medium rounded-full shadow-md hover:shadow-lg transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-stone-800">
          Suggest a New Place
        </button>
      </div>
    </div>
  </div>
</div>

Componentes relacionados

Componente de mapas brutalistas

Un complejo componente de mapa de comercio electrónico de estilo brutalista con colores monocromáticos y compatibilidad con el modo oscuro mediante Tailwind CSS. Muestra ubicaciones de productos con elementos de diseño brutalistas.

Abrir