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

Maps 컴포넌트

Neumorphism 스타일, 다크 모드 지원 및 플레이스홀더 이미지가 있는 반응형 Maps Component입니다.

미리 보기

HTML 코드 

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Maps Component</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    .neumorphism-card {
      border-radius: 20px;
      background: #e0e0e0;
      box-shadow: 7px 7px 15px #bebebe,
                  -7px -7px 15px #ffffff;
      transition: all 0.3s ease;
    }
    .neumorphism-card:hover {
      box-shadow: 5px 5px 10px #bebebe,
                  -5px -5px 10px #ffffff;
    }
    .dark .neumorphism-card {
      background: #333333;
      box-shadow: 7px 7px 15px #2b2b2b,
                  -7px -7px 15px #3b3b3b;
    }
    .dark .neumorphism-card:hover {
      box-shadow: 5px 5px 10px #2b2b2b,
                  -5px -5px 10px #3b3b3b;
    }
  </style>
</head>
<body class="bg-gray-200 dark:bg-gray-800 p-8">

  <div class="neumorphism-card max-w-sm mx-auto overflow-hidden md:max-w-md dark:text-white">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <img class="h-48 w-full object-cover md:w-48" src="https://images.unsplash.com/photo-1594399418882-cf049f2a25c3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="Map image">
      </div>
      <div class="p-8">
        <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold dark:text-indigo-300">Location</div>
        <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline dark:text-white">Central Park</a>
        <p class="mt-2 text-gray-500 dark:text-gray-400">A large urban park in New York City.</p>
        <div class="mt-4 flex items-center">
          <svg class="h-5 w-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
          </svg>
          <span class="ml-2 text-gray-500 dark:text-gray-400">New York, NY</span>
        </div>
      </div>
    </div>
  </div>

</body>
</html>

관련 구성 요소

Maps 컴포넌트

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

열다

미니멀리스트 단색 비즈니스 지도 구성 요소

비즈니스 및 기업 웹사이트를 위해 설계된 반응형 대화형 지도 구성 요소로, 미니멀한 플랫 디자인, 단색 색 구성표 및 다크 모드 지원을 특징으로 합니다. 자리 표시자, 맵 이미지 및 연락처 세부 정보 자리 표시자를 포함합니다.

열다

산업VibrantMapsComponent

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

열다