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

Retro Maps 컴포넌트

레트로/빈티지 미학, 생생한 색 구성표, 비즈니스/기업 목적을 갖춘 단순하고 반응이 빠르며 다크 모드와 호환되는 지도 구성 요소로, Tailwind CSS로 제작되었습니다.

미리 보기

HTML 코드 

<section class="bg-gray-100 dark:bg-gray-900 py-12">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-8">Our Location</h2>
    <div class="relative">
      <img src="https://picsum.photos/seed/maps/800/400" alt="Map of our location" class="w-full h-96 object-cover rounded-lg shadow-lg">
      <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-50 rounded-lg"></div>
      <div class="absolute bottom-0 left-0 right-0 p-6 text-white">
        <h3 class="text-2xl font-semibold mb-2">Find Us Here</h3>
        <p class="text-gray-300">123 Main Street, Anytown, USA</p>
      </div>
    </div>
  </div>
</section>

관련 구성 요소

Maps 컴포넌트

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

열다

3D_Neon_Maps_Component

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

열다

Retro Maps 컴포넌트

Tailwind CSS를 사용하여 레트로/빈티지 디자인, 유사한 색 구성표 및 어두운 테마를 지원하는 간단하고 반응이 빠른 지도 구성 요소입니다. 블로그 또는 콘텐츠 웹사이트에 적합합니다.

열다