Composante Brutalist Maps
Un composant de carte e-commerce complexe, de style brutaliste, avec des couleurs monochromes et une prise en charge du mode sombre à l’aide de Tailwind CSS. Il affiche les emplacements des produits avec des éléments de design brutalistes.
HTML Code
<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>
Composants associés
Composant Cartes
Un composant Maps réactif avec un style Material Design et une prise en charge du thème sombre, construit à l’aide de Tailwind CSS.
IndustrielVibrantMapsComposant
Un composant cartographique réactif et interactif avec une esthétique industrielle, brute et une palette de couleurs vives, adapté aux applications technologiques/SaaS. Inclut la prise en charge du mode sombre.
Cyberpunk_Gaming_Maps_Component
Un composant de cartes simple et réactif sur le thème du cyberpunk pour les interfaces de jeu, avec des arrière-plans sombres, des accents néon et une palette de couleurs analogue. Inclut la prise en charge du mode sombre.