Brutalist Maps 컴포넌트
단색 색상과 다크 모드가 있는 복잡한 브루탈리즘 스타일의 전자상거래 지도 컴포넌트는 Tailwind CSS를 사용하여 지원합니다. 브루탈리즘 디자인 요소로 제품 위치를 표시합니다.
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>