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
Composant Maps avec conception Skeuomorphism, schéma de couleurs triadique, complexité modérée et objectif de médias sociaux. Conception réactive avec prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Cartes
Un composant de cartes complexe conçu dans le style Material Design, adapté aux tableaux de bord. Il intègre des éléments réactifs, des fonctionnalités interactives et prend en charge l’esthétique du mode sombre à l’aide d’un schéma de couleurs analogue.
Composant Retro Maps
Un composant de cartes simple et réactif avec un design rétro/vintage, une palette de couleurs analogue et une prise en charge du thème sombre, utilisant Tailwind CSS. Convient aux blogs ou aux sites Web de contenu.