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>

관련 구성 요소

산업VibrantMapsComponent

기술/SaaS 응용 프로그램에 적합한 산업적이고 원시적인 미학 및 생생한 색 구성표를 갖춘 반응형 대화형 지도 구성 요소입니다. 다크 모드 지원이 포함됩니다.

열다

Maps 컴포넌트

교육용 플랫폼을 위해 설계된 반응형 지도와 같은 구성 요소로, 인터랙티브 요소와 다크 모드를 지원하는 부드러운 파스텔 색상을 특징으로 합니다. 미묘한 호버 및 활성 상태와 같은 미시적 상호 작용에 중점을 둡니다.

열다

Maps 컴포넌트

스큐어모피즘 디자인, 트라이어딕 색 구성표, 중간 정도의 복잡성 및 소셜 미디어 목적이 있는 지도 구성 요소. Tailwind CSS를 사용하여 어두운 테마를 지원하는 반응형 디자인.

열다