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 디자인을 특징으로 하는 Maps 구성 요소로, Tailwind CSS를 활용합니다.

열다

Brutalist Dashboard 맵 컴포넌트

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

열다

Retro Maps 컴포넌트

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

열다