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

Maps 컴포넌트

소셜 미디어 인터페이스용으로 설계된 웹 구성 요소로, 위치가 표시된 지도를 표시하는 데 적합한 회색조 색 구성표의 브루탈리즘 디자인을 특징으로 합니다.

미리 보기

HTML 코드 

<div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg dark:bg-gray-800 max-w-2xl mx-auto">
  <h2 class="text-2xl font-bold mb-4">Maps Component</h2>
  <div class="relative mb-5">
    <img src="https://picsum.photos/600/400" alt="Map" class="w-full h-64 object-cover rounded-md mb-2">
    <div class="absolute left-4 top-4 bg-black bg-opacity-50 p-2 rounded">Location 1</div>
    <div class="absolute left-24 top-20 bg-black bg-opacity-50 p-2 rounded">Location 2</div>
    <div class="absolute left-10 top-36 bg-black bg-opacity-50 p-2 rounded">Location 3</div>
  </div>
  <div class="flex flex-col space-y-3">
    <h3 class="text-lg font-semibold">Locations</h3>
    <div class="flex items-center bg-gray-700 p-3 rounded shadow dark:bg-gray-600">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">User 1</p>
        <p class="text-sm">Location 1 Description</p>
      </div>
    </div>
    <div class="flex items-center bg-gray-700 p-3 rounded shadow dark:bg-gray-600">
      <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">User 2</p>
        <p class="text-sm">Location 2 Description</p>
      </div>
    </div>
    <div class="flex items-center bg-gray-700 p-3 rounded shadow dark:bg-gray-600">
      <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">User 3</p>
        <p class="text-sm">Location 3 Description</p>
      </div>
    </div>
  </div>
  <button class="mt-5 bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded dark:bg-gray-700 dark:hover:bg-gray-600">View More</button>
</div>

관련 구성 요소

Brutalist Dashboard 맵 컴포넌트

Tailwind CSS를 사용하여 생생한 색상, 고대비, 복잡한 대화형 요소, 반응형 디자인 및 어두운 테마를 지원하는 브루탈리즘 스타일의 대시보드 맵 구성 요소입니다.

열다

Maps 컴포넌트

대시보드에 적합한 Material Design 스타일로 설계된 복잡한 지도 구성 요소입니다. 반응형 요소, 대화형 기능을 통합하고 유사한 색 구성표를 사용하여 다크 모드 미학을 지원합니다.

열다

Maps 컴포넌트

Glassmorphism 스타일로 디자인된 반응형 지도 구성 요소로, 어두운 테마와 Tailwind CSS 클래스를 특징으로 합니다. 데이터 시각화 및 제어판이 있는 대시보드에 적합합니다.

열다