CCHub Logo CCHub Tailwind Collection
구성 요소 지도 Brutalist Maps 컴포넌트

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>

관련 구성 요소

Maps 컴포넌트

Glassmorphism 디자인, 회색조 색 구성표 및 간단한 레이아웃이 있는 간단한 Maps 구성 요소입니다. 반응이 빠르며 다크 모드를 지원합니다.

열다

Brutalism_Photography_Maps_Component

사진 포트폴리오를 위한 단순하고 브루탈리즘 스타일의 지도 구성 요소로, 높은 대비와 어두운 모드를 지원하는 대담한 보라색 색 구성표가 특징입니다.

열다

3D_Neon_Maps_Component

네온/일렉트릭 색상 구성표가 있는 복잡한 3D 스타일 지도 구성 요소로, 위치 또는 프로젝트를 보여주는 포트폴리오에 적합합니다. 빛나는 요소, 풍부한 인터랙티브와 같은 UI, 다크 모드 지원을 통한 완전한 응답성을 특징으로 합니다.

열다