Componentes Mapas Componente de mapas brutalistas

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.

Vista previa

Código HTML


<div class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-8 font-mono border-4 border-gray-900 dark:border-gray-100">

  <h2 class="text-3xl font-bold mb-6 border-b-4 border-gray-900 dark:border-gray-100 pb-2">Store Locations</h2>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

    <!-- Map Area - Placeholder for Map Integration -->
    <div class="bg-gray-300 dark:bg-gray-700 h-96 border-4 border-gray-900 dark:border-gray-100 flex items-center justify-center text-center">
      <p class="text-xl font-bold">Map Integration Area</p>
      <!-- In a real application, a map library (like Leaflet or Google Maps) would be initialized here -->
    </div>

    <!-- Location List -->
    <div class="space-y-6">

      <!-- Location Item 1 -->
      <div class="border-4 border-gray-900 dark:border-gray-100 p-4 bg-white dark:bg-gray-800">
        <h3 class="text-xl font-bold mb-2">Brutalist Boutique - Downtown</h3>
        <p class="mb-2">123 Raw Street, Suite 101</p>
        <p class="mb-2">Concrete City, CA 90210</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Open: 10:00 AM - 8:00 PM</p>
        <button class="mt-4 px-6 py-2 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 font-bold border-2 border-gray-900 dark:border-gray-100 hover:bg-gray-700 dark:hover:bg-gray-300">View Details</button>
      </div>

      <!-- Location Item 2 -->
      <div class="border-4 border-gray-900 dark:border-gray-100 p-4 bg-white dark:bg-gray-800">
        <h3 class="text-xl font-bold mb-2">Monochromatic Mall Spot</h3>
        <p class="mb-2">456 High Contrast Avenue, Kiosk 7</p>
        <p class="mb-2">Shadowsburgh, NY 10001</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Open: 11:00 AM - 7:00 PM</p>
        <button class="mt-4 px-6 py-2 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 font-bold border-2 border-gray-900 dark:border-gray-100 hover:bg-gray-700 dark:hover:bg-gray-300">View Details</button>
      </div>

      <!-- Location Item 3 -->
      <div class="border-4 border-gray-900 dark:border-gray-100 p-4 bg-white dark:bg-gray-800">
        <h3 class="text-xl font-bold mb-2">The Crude Corner Shop</h3>
        <p class="mb-2">789 Uneven Road, Unit B</p>
        <p class="mb-2">Roughville, TX 75001</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Open: 9:00 AM - 6:00 PM</p>
        <button class="mt-4 px-6 py-2 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 font-bold border-2 border-gray-900 dark:border-gray-100 hover:bg-gray-700 dark:hover:bg-gray-300">View Details</button>
      </div>

    </div>

  </div>

</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.

Abrir

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.

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