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

Maps 컴포넌트

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

미리 보기

HTML 코드 

<div class="relative flex items-center justify-center w-full h-96 bg-gray-300 dark:bg-gray-700 overflow-hidden" style="backdrop-filter: blur(10px); background-color: rgba(209, 213, 219, 0.3); dark:background-color: rgba(55, 65, 81, 0.3);">
  <div class="absolute inset-0 z-0">
    <img src="https://picsum.photos/seed/maps/800/600" alt="Map background" class="object-cover w-full h-full">
  </div>
  <div class="relative z-10 p-6 bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 rounded-lg shadow-lg text-center">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Find Us Here</h2>
    <p class="text-gray-700 dark:text-gray-300">Our location on the map.</p>
  </div>
</div>

관련 구성 요소

Brutalist Dashboard 맵 컴포넌트

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

열다

Maps 컴포넌트

Tailwind CSS를 사용하여 3D 디자인 요소와 어두운 테마를 지원하는 반응형 지도 구성 요소입니다.

열다

Maps 컴포넌트

소셜 미디어를 위한 복잡하고 생동감 넘치는 지도 구성 요소로, Tailwind CSS를 사용한 마이크로 인터랙션, 반응형 디자인 및 다크 모드 지원을 제공합니다.

열다