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.
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
Gradient_Forest_Maps_Component
Un componente de mapa simple y receptivo para plataformas educativas, con una paleta de degradados verde bosque y transiciones suaves, con soporte para modo oscuro.
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.
Paper_Print_Sepia_Sports_Map_Component
Un componente sensible similar a un mapa para aplicaciones deportivas/de fitness con un diseño inspirado en el papel/impresión y una combinación de colores sepia/marrón. Incluye un área de mapa simulada, pines de ubicación y una leyenda, con soporte completo para el modo oscuro.