검색 구성 요소

카테고리

지도

대화형 지리 지도

Luxury_Autumn_Maps_Component

럭셔리한 여행 및 관광 웹사이트를 위해 설계된 반응형의 우아한 지도 구성 요소로, 가을 색상과 다크 모드를 지원합니다.

                <div class="bg-stone-50 dark:bg-stone-950 min-h-screen p-4 sm:p-8 font-serif text-stone-800 dark:text-stone-200 transition-colors duration-300">
  <div class="max-w-7xl mx-auto bg-white dark:bg-stone-900 rounded-3xl shadow-xl overflow-hidden md:flex elevation-200">
    
    <!-- Left Panel: Map Preview -->
    <div class="md:w-3/5 relative min-h-[300px] md:min-h-auto">
      <img src="https://picsum.photos/1200/800/?random=1&blur=2" alt="Map Preview" class="w-full h-full object-cover brightness-90 dark:brightness-75">
      <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent flex items-end p-6 md:p-10">
        <h2 class="text-4xl sm:text-5xl font-bold text-white leading-tight mb-2">
          Explore Hidden Gems
        </h2>
      </div>
      <button class="absolute top-6 right-6 p-3 rounded-full bg-white dark:bg-stone-800 text-stone-700 dark:text-stone-300 shadow-lg hover:scale-105 active:scale-95 transition-transform duration-200 focus:outline-none focus:ring-4 focus:ring-stone-300 dark:focus:ring-stone-700" aria-label="View Live Map">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h-5v-1h5.381c.217 0 .419-.074.587-.206 1.745-1.229 2.542-3.873 1.282-5.733L7.02 9.083c-.882-1.322-.44-3.109 1.096-3.771 1.764-.784 3.731-.225 4.542 1.411.085.176.136.377.144.584L14.5 12h2.5l-.276-2.76A5 5 0 0013.2 4.14C11.5 1.458 8 1.875 6.07 4.128L3.11 7.24a4.998 4.998 0 00-1.07 4.137l.45 2.25c.162.81.71 1.636 1.44 2.115l.235.155c.677.447 1.503.654 2.316.654H9.75z" />
        </svg>
      </button>
    </div>

    <!-- Right Panel: Location Details & Search -->
    <div class="md:w-2/5 p-6 sm:p-8 md:p-10 flex flex-col justify-between">
      <div>
        <h3 class="text-3xl font-bold text-stone-800 dark:text-stone-100 mb-4">Discover Your Next Adventure</h3>
        <p class="text-stone-600 dark:text-stone-300 leading-relaxed mb-6">
          Uncover curated experiences and stunning destinations. From serene landscapes to bustling cityscapes, find your perfect escape.
        </p>

        <!-- Search Bar -->
        <div class="relative mb-6">
          <input type="text" placeholder="Search locations, landmarks..." class="w-full py-3 pl-12 pr-4 rounded-xl bg-stone-100 dark:bg-stone-800 border border-stone-200 dark:border-stone-700 text-stone-800 dark:text-stone-200 focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-600 transition-all duration-200 placeholder:text-stone-400 dark:placeholder:text-stone-500">
          <div class="absolute inset-y-0 left-0 flex items-center pl-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-stone-500 dark:text-stone-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </div>
        </div>

        <!-- Featured Locations -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 auto-rows-fr">
          <div class="flex items-center p-4 rounded-lg bg-orange-50 dark:bg-orange-950 border border-orange-100 dark:border-orange-800 shadow-sm transition-transform hover:scale-[1.02] duration-200">
            <img src="https://picsum.photos/60/60?random=2" alt="Location Image" class="w-10 h-10 rounded-full object-cover mr-3">
            <div>
              <p class="font-semibold text-orange-800 dark:text-orange-200 text-sm">Autumn Peaks</p>
              <p class="text-xs text-orange-600 dark:text-orange-400">Mountains, SCENIC</p>
            </div>
          </div>
          <div class="flex items-center p-4 rounded-lg bg-orange-50 dark:bg-orange-950 border border-orange-100 dark:border-orange-800 shadow-sm transition-transform hover:scale-[1.02] duration-200">
            <img src="https://picsum.photos/60/60?random=3" alt="Location Image" class="w-10 h-10 rounded-full object-cover mr-3">
            <div>
              <p class="font-semibold text-orange-800 dark:text-orange-200 text-sm">Vineyard Valley</p>
              <p class="text-xs text-orange-600 dark:text-orange-400">WINE, RURAL</p>
            </div>
          </div>
          <div class="flex items-center p-4 rounded-lg bg-orange-50 dark:bg-orange-950 border border-orange-100 dark:border-orange-800 shadow-sm transition-transform hover:scale-[1.02] duration-200">
            <img src="https://picsum.photos/60/60?random=4" alt="Location Image" class="w-10 h-10 rounded-full object-cover mr-3">
            <div>
              <p class="font-semibold text-orange-800 dark:text-orange-200 text-sm">Lakeside Retreat</p>
              <p class="text-xs text-orange-600 dark:text-orange-400">NATURE, CALM</p>
            </div>
          </div>
          <div class="flex items-center p-4 rounded-lg bg-orange-50 dark:bg-orange-950 border border-orange-100 dark:border-orange-800 shadow-sm transition-transform hover:scale-[1.02] duration-200">
            <img src="https://picsum.photos/60/60?random=5" alt="Location Image" class="w-10 h-10 rounded-full object-cover mr-3">
            <div>
              <p class="font-semibold text-orange-800 dark:text-orange-200 text-sm">Historic Old Town</p>
              <p class="text-xs text-orange-600 dark:text-orange-400">CITY, CULTURAL</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Call to Action -->
      <div class="mt-8">
        <a href="#" class="inline-flex items-center justify-center w-full px-6 py-3 rounded-xl bg-orange-700 text-white font-semibold tracking-wide hover:bg-orange-800 dark:bg-orange-600 dark:hover:bg-orange-700 transition-colors duration-300 shadow-lg transform hover:-translate-y-0.5 active:translate-y-0 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-800">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.727A8 8 0 016.343 5.273L3 9.77v.068a.5.5 0 01-.5.5h-.069l-.16.03a.5.5 0 01-.177.018l-1.077.016a.5.5 0 01-.497-.48l-.001-.01c0-.27.224-.492.497-.492a.5.5 0 01.49-.408l.01-.01.01-.005a.5.5 0 01.372-.09m14.975 1.01a8 8 0 00-11.314-11.314M12 17.5V12h-.01m0 0l-5-5m5 5l5-5" />
          </svg>
          Plan Your Trip Now
        </a>
      </div>
    </div>

  </div>
</div>

Gradient_Forest_Maps_Component

교육용 플랫폼을 위한 간단하고 반응이 빠른 지도 구성 요소로, 포레스트 그린 그라디언트 팔레트와 부드러운 전환을 특징으로 하며 다크 모드를 지원합니다.

열다 미리 보기

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-emerald-50 to-lime-100 dark:from-gray-900 dark:to-gray-800 transition-colors duration-500 min-h-screen flex items-center justify-center">
  <div class="max-w-4xl w-full rounded-xl shadow-2xl overflow-hidden bg-white dark:bg-gray-800 transition-colors duration-500 backdrop-blur-sm bg-opacity-80 dark:bg-opacity-80 border border-emerald-200 dark:border-emerald-700">
    <div class="p-6 sm:p-8 lg:p-10 text-center">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-emerald-800 dark:text-emerald-300 mb-4 sm:mb-6 leading-tight transition-colors duration-500">
        Explore Geographic Concepts
      </h2>
      <p class="text-lg sm:text-xl text-emerald-700 dark:text-emerald-400 mb-6 sm:mb-8 transition-colors duration-500">
        Visualize and understand complex geographic data with interactive maps.
      </p>

      <div class="relative w-full h-64 sm:h-80 md:h-96 lg:h-112 rounded-lg overflow-hidden shadow-xl border border-emerald-300 dark:border-emerald-600 group">
        <!-- Placeholder for an interactive map -->
        <img src="https://picsum.photos/1200/800?random=1&blur=2" alt="Placeholder map illustration with abstract geographical features" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 group-focus-within:scale-105 opacity-80 dark:opacity-70" aria-hidden="true">
        <div class="absolute inset-0 bg-gradient-to-br from-emerald-400/30 to-lime-200/30 dark:from-emerald-800/40 dark:to-lime-900/40 flex items-center justify-center p-4 rounded-lg">
          <div class="text-white drop-shadow-lg text-center">
            <p class="text-xl sm:text-2xl font-bold mb-2">Interactive Map Area</p>
            <p class="text-sm sm:text-base">Content for map embedding would go here.</p>
          </div>
        </div>
      </div>

      <div class="mt-8 text-center">
        <a href="#" class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full shadow-lg text-white 
        bg-gradient-to-r from-emerald-500 to-lime-600 hover:from-emerald-600 hover:to-lime-700 
        dark:from-emerald-600 dark:to-lime-700 dark:hover:from-emerald-700 dark:hover:to-lime-800 
        transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 focus:ring-offset-white dark:focus:ring-offset-gray-900">
          
          View Course Maps
          <svg class="ml-3 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>
  </div>
</div>

Cyberpunk_Gaming_Maps_Component

게임 인터페이스를 위한 단순하고 반응이 빠른 사이버펑크 테마 맵 구성 요소로, 어두운 배경, 네온 액센트 및 유사한 색 구성표를 특징으로 합니다. 다크 모드 지원이 포함됩니다.

열다 미리 보기

                <div class="p-4 md:p-8 bg-gray-950 dark:bg-black text-gray-200 min-h-screen font-mono">
    <div class="max-w-4xl mx-auto bg-gray-900 dark:bg-gray-950 border-2 border-fuchsia-600 dark:border-purple-700 shadow-2xl shadow-fuchsia-800/50 dark:shadow-purple-900/50 rounded-lg overflow-hidden relative">
        <!-- Neon Glitch Overlay -->
        <div class="absolute inset-0 z-0 opacity-10 blur-xl animate-pulse" style="background-image: linear-gradient(to right, #8A2BE2, #A020F0, #FF00FF);"></div>

        <div class="relative z-10 p-4 sm:p-6 md:p-8">
            <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-fuchsia-400 dark:text-purple-400 uppercase tracking-widest leading-tight border-b-2 border-fuchsia-700 dark:border-purple-600 pb-2">
                <span class="block text-xs text-fuchsia-600 dark:text-purple-500 mb-1">SYSTEM MAP</span>
                NEO-TOKYO SECTOR 7
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Map Placeholder -->
                <div class="order-2 md:order-1 bg-gray-800 dark:bg-gray-900 border border-fuchsia-700 dark:border-purple-700 rounded-md overflow-hidden relative group aspect-video sm:aspect-[4/3] md:aspect-square lg:aspect-video">
                    <img src="https://picsum.photos/id/237/600/400?grayscale&blur=2" alt="Cyberpunk Map Grid" class="w-full h-full object-cover opacity-70 group-hover:opacity-100 transition-opacity duration-300">
                    <div class="absolute inset-0 bg-gradient-to-br from-fuchsia-900/30 via-purple-700/20 to-indigo-900/30 opacity-70 group-hover:opacity-90 transition-opacity duration-300"></div>
                    <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
                        <span class="text-fuchsia-300 dark:text-purple-300 text-6xl md:text-8xl font-black opacity-10 select-none">MAP</span>
                    </div>
                    <div class="absolute top-2 left-2 text-fuchsia-400 dark:text-purple-400 text-sm md:text-base">[23:45:01] GRID: A-7</div>
                    <div class="absolute bottom-2 right-2 flex space-x-2">
                        <button class="px-3 py-1 bg-fuchsia-600 dark:bg-purple-600 text-white text-xs rounded-full hover:bg-fuchsia-500 dark:hover:bg-purple-500 transition-colors duration-200 outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-900">+</button>
                        <button class="px-3 py-1 bg-fuchsia-600 dark:bg-purple-600 text-white text-xs rounded-full hover:bg-fuchsia-500 dark:hover:bg-purple-500 transition-colors duration-200 outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-900">-</button>
                    </div>
                </div>

                <!-- Map Controls/Info -->
                <div class="order-1 md:order-2 space-y-4">
                    <div class="bg-gray-800 dark:bg-gray-900 p-4 rounded-md border border-fuchsia-700 dark:border-purple-700 shadow-inner shadow-fuchsia-900/20 dark:shadow-purple-900/20">
                        <h3 class="text-fuchsia-300 dark:text-purple-300 text-lg font-semibold mb-2">NAVIGATION</h3>
                        <div class="flex flex-wrap gap-2">
                            <button class="flex-grow text-center px-4 py-2 bg-fuchsia-700 dark:bg-purple-700 text-fuchsia-100 dark:text-purple-100 rounded-sm text-sm font-bold uppercase transition-transform transform hover:scale-105 hover:bg-fuchsia-600 dark:hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-900">
                                <span class="hidden sm:inline">TARGET</span> SECTOR A
                            </button>
                            <button class="flex-grow text-center px-4 py-2 bg-fuchsia-700 dark:bg-purple-700 text-fuchsia-100 dark:text-purple-100 rounded-sm text-sm font-bold uppercase transition-transform transform hover:scale-105 hover:bg-fuchsia-600 dark:hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-900">
                                <span class="hidden sm:inline">PING</span> LOCATION
                            </button>
                            <button class="flex-grow text-center px-4 py-2 bg-fuchsia-700 dark:bg-purple-700 text-fuchsia-100 dark:text-purple-100 rounded-sm text-sm font-bold uppercase transition-transform transform hover:scale-105 hover:bg-fuchsia-600 dark:hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-900">
                                <span class="hidden sm:inline">ROUTE</span> OPTIMIZE
                            </button>
                        </div>
                    </div>

                    <div class="bg-gray-800 dark:bg-gray-900 p-4 rounded-md border border-fuchsia-700 dark:border-purple-700 shadow-inner shadow-fuchsia-900/20 dark:shadow-purple-900/20">
                        <h3 class="text-fuchsia-300 dark:text-purple-300 text-lg font-semibold mb-2">ACTIVE DATASTREAM</h3>
                        <p class="text-xs text-gray-400 leading-relaxed">
                            <span class="text-fuchsia-500 dark:text-purple-500">&gt;</span> INCOMING ENCRYPTED TRANSMISSION #0XF3C.<br>
                            <span class="text-fuchsia-500 dark:text-purple-500">&gt;</span> LOCAL GRID STATUS: STABLE. TRAFFIC FLOW NORM <span class="text-green-400">[OPTIMAL]</span>.<br>
                            <span class="text-fuchsia-500 dark:text-purple-500">&gt;</span> ANOMALY DETECTED: SECTOR 7-B. <span class="text-yellow-400">[INVESTIGATE]</span>.<br>
                            <span class="text-fuchsia-500 dark:text-purple-500">&gt;</span> SYSTEM HEALTH: <span class="text-fuchsia-400 dark:text-purple-400">98%</span>. DIAGNOSTICS COMPLETE.
                        </p>
                        <div class="mt-3 flex justify-end">
                            <button class="px-4 py-2 bg-fuchsia-900 dark:bg-purple-900 text-fuchsia-300 dark:text-purple-300 text-sm rounded-sm hover:bg-fuchsia-800 dark:hover:bg-purple-800 transition-colors duration-200 outline-none focus:ring-2 focus:ring-fuchsia-500 dark:focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-gray-900">
                                CLEAR LOG
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-6 bg-gray-800 dark:bg-gray-900 p-4 rounded-md border border-fuchsia-700 dark:border-purple-700 shadow-inner shadow-fuchsia-900/20 dark:shadow-purple-900/20">
                <h3 class="text-fuchsia-300 dark:text-purple-300 text-lg font-semibold mb-2">WAYPOINTS</h3>
                <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
                    <div class="flex items-center space-x-2 text-sm">
                        <span class="w-3 h-3 bg-red-600 rounded-full animate-pulse"></span>
                        <span>HQ: 12.4km</span>
                    </div>
                    <div class="flex items-center space-x-2 text-sm">
                        <span class="w-3 h-3 bg-blue-600 rounded-full"></span>
                        <span>DATANODE ALPHA: 3.1km</span>
                    </div>
                    <div class="flex items-center space-x-2 text-sm">
                        <span class="w-3 h-3 bg-green-600 rounded-full"></span>
                        <span>SAFEZONE γ: 7.8km</span>
                    </div>
                    <div class="flex items-center space-x-2 text-sm">
                        <span class="w-3 h-3 bg-yellow-600 rounded-full animate-ping"></span>
                        <span class="text-yellow-400">UNKNOWN SIG: 0.5km</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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

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

열다 미리 보기

                <section class="py-16 sm:py-20 bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-4">
        Find Us On The Map
      </h2>
      <p class="text-lg sm:xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
        Visit our office or get in touch through our contact details below. We look forward to connecting with you.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
      <!-- Map Placeholder -->
      <div class="relative rounded-lg overflow-hidden shadow-xl dark:shadow-2xl aspect-video w-full">
        <img src="https://picsum.photos/1200/800?grayscale&blur=2" alt="Placeholder map of our location" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900/50 to-transparent"></div>
        <div class="absolute bottom-4 left-4 right-4 p-4 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-md shadow-lg text-sm sm:text-base">
          <p class="font-semibold text-gray-900 dark:text-white mb-1">Our Global Headquarters</p>
          <p class="text-gray-700 dark:text-gray-300">123 Business Avenue, Suite 100, Metropolis City, Country 12345</p>
        </div>
      </div>

      <!-- Contact Information -->
      <div class="bg-white dark:bg-gray-800 p-8 sm:p-10 rounded-lg shadow-xl dark:shadow-2xl overflow-hidden">
        <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-6">
          Get In Touch
        </h3>
        <ul class="space-y-6">
          <li class="flex items-start">
            <svg class="h-7 w-7 text-gray-500 dark:text-gray-400 mr-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
              <path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
            <div>
              <p class="font-semibold text-gray-900 dark:text-white text-lg">Address:</p>
              <p class="text-gray-700 dark:text-gray-300">123 Maple Street, Business District, Cityville, State 01234</p>
            </div>
          </li>
          <li class="flex items-start">
            <svg class="h-7 w-7 text-gray-500 dark:text-gray-400 mr-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
            </svg>
            <div>
              <p class="font-semibold text-gray-900 dark:text-white text-lg">Phone:</p>
              <a href="tel:+1234567890" class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors duration-200">+1 (234) 567-890</a>
            </div>
          </li>
          <li class="flex items-start">
            <svg class="h-7 w-7 text-gray-500 dark:text-gray-400 mr-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </svg>
            <div>
              <p class="font-semibold text-gray-900 dark:text-white text-lg">Email:</p>
              <a href="mailto:[email protected]" class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors duration-200">[email protected]</a>
            </div>
          </li>
        </ul>
        <div class="mt-8">
          <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200">
            Get Directions
            <svg class="ml-3 -mr-1 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M17.525 17.525A7.989 7.989 0 0012 3c-4.418 0-8 3.582-8 8s3.582 8 8 8c2.072 0 3.999-.74 5.485-1.975L19 21l2-2-3.475-3.475z" />
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

Skeuomorphic Map 컴포넌트

스큐어모픽 디자인, 흙빛 색 구성표, 다크 모드 지원을 갖춘 단순하고 반응이 빠른 맵 구성 요소로 포트폴리오에 적합합니다.

열다 미리 보기

                <div class="p-4 md:p-8 bg-gradient-to-br from-stone-200 to-stone-400 dark:from-stone-800 dark:to-stone-950 shadow-2xl rounded-3xl border-4 border-stone-500 dark:border-stone-700 max-w-4xl mx-auto my-8"> <div class="w-full h-64 md:h-96 rounded-2xl overflow-hidden border-2 border-stone-600 dark:border-stone-400 shadow-inner"> <img src="https://picsum.photos/seed/map/800/600" alt="Skeuomorphic Map" class="w-full h-full object-cover grayscale brightness-90 contrast-120"> </div> <div class="mt-6 text-center"> <h3 class="text-2xl md:text-3xl font-serif text-stone-800 dark:text-stone-200 drop-shadow-md">Location Details</h3> <p class="mt-2 text-md md:text-lg text-stone-700 dark:text-stone-300 font-sans">123 Rustic Road, Earthville</p> <button class="mt-5 px-6 py-3 bg-gradient-to-r from-amber-700 to-amber-900 text-white font-bold rounded-full shadow-lg hover:from-amber-600 hover:to-amber-800 focus:outline-none focus:ring-4 focus:ring-amber-500 focus:ring-opacity-50 transition transform hover:-translate-y-1 active:translate-y-0"> View Large Map </button> </div> <div class="mt-8 flex justify-around items-center px-4"> <div class="text-center"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar 1" class="w-16 h-16 rounded-full mx-auto border-4 border-stone-600 dark:border-stone-400 shadow-md"> <p class="text-stone-700 dark:text-stone-300 text-sm mt-2"> Explorer </p> </div> <div class="text-center"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar 2" class="w-16 h-16 rounded-full mx-auto border-4 border-stone-600 dark:border-stone-400 shadow-md"> <p class="text-stone-700 dark:text-stone-300 text-sm mt-2"> Cartographer </p> </div> </div> </div>

Maps 컴포넌트

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

열다 미리 보기

                <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>

Glassmorphism Maps 컴포넌트

소셜 미디어용 Glassmorphism Maps 구성 요소

열다 미리 보기

                <div class="glassmorphism-maps-component relative h-96 overflow-hidden rounded-lg shadow-xl bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg">
  <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://picsum.photos/800/600');"></div>
  <div class="relative h-full flex flex-col justify-between p-6 bg-white bg-opacity-10 dark:bg-gray-900 dark:bg-opacity-10">
    <div class="flex items-center">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div>
        <p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
        <p class="text-gray-600 dark:text-gray-300 text-sm">📍 On an adventure</p>
      </div>
    </div>
    <div class="text-right">
      <button class="px-4 py-2 bg-blue-500 text-white rounded-full hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-500">
        View Location
      </button>
    </div>
  </div>
</div>

Brutalist Dashboard 맵 컴포넌트

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

열다 미리 보기

                <div class="bg-yellow-300 dark:bg-purple-900 text-gray-900 dark:text-gray-100 min-h-screen p-8 font-mono">
  <div class="container mx-auto">
    <h1 class="text-4xl font-bold mb-8 border-b-4 border-red-500 pb-2">Dashboard Overview</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Map Section -->
      <div class="bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-lime-400 shadow-xl">
        <h2 class="text-2xl font-bold mb-4 border-b-2 border-blue-500 pb-2">Geographical Data</h2>
        <div class="h-64 bg-gray-400 dark:bg-gray-700 border-2 border-black dark:border-lime-400 flex items-center justify-center text-gray-700 dark:text-gray-400">
          [Interactive Map Placeholder]
        </div>
        <div class="mt-4 grid grid-cols-2 gap-4">
          <div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
            <h3 class="font-bold mb-2">Metric A</h3>
            <p class="text-xl text-green-600 dark:text-green-400">1,245</p>
          </div>
          <div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
            <h3 class="font-bold mb-2">Metric B</h3>
            <p class="text-xl text-red-600 dark:text-red-400">489</p>
          </div>
        </div>
      </div>

      <!-- Data Visualization Section -->
      <div class="bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-lime-400 shadow-xl">
        <h2 class="text-2xl font-bold mb-4 border-b-2 border-purple-500 pb-2">Key Metrics</h2>
        <div class="space-y-4">
          <div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
            <h3 class="font-bold mb-2">Sales Performance</h3>
            <div class="h-24 bg-gray-400 dark:bg-gray-700 border-2 border-black dark:border-lime-400 flex items-center justify-center text-gray-700 dark:text-gray-400">[Chart Placeholder]</div>
          </div>
          <div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
            <h3 class="font-bold mb-2">User Engagement</h3>
            <div class="h-24 bg-gray-400 dark:bg-gray-700 border-2 border-black dark:border-lime-400 flex items-center justify-center text-gray-700 dark:text-gray-400">[Chart Placeholder]</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Table Section -->
    <div class="mt-8 bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-lime-400 shadow-xl">
      <h2 class="text-2xl font-bold mb-4 border-b-2 border-orange-500 pb-2">Recent Activity</h2>
      <table class="min-w-full border-collapse border border-black dark:border-lime-400">
        <thead>
          <tr>
            <th class="border border-black dark:border-lime-400 p-2 text-left">User</th>
            <th class="border border-black dark:border-lime-400 p-2 text-left">Action</th>
            <th class="border border-black dark:border-lime-400 p-2 text-left">Timestamp</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="border border-black dark:border-lime-400 p-2 flex items-center">
              <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border-2 border-black dark:border-lime-400">
              <span>John Doe</span>
            </td>
            <td class="border border-black dark:border-lime-400 p-2">Viewed Report</td>
            <td class="border border-black dark:border-lime-400 p-2">2023-10-27 10:30</td>
          </tr>
          <tr>
            <td class="border border-black dark:border-lime-400 p-2 flex items-center">
               <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border-2 border-black dark:border-lime-400">
              <span>Jane Smith</span>
            </td>
            <td class="border border-black dark:border-lime-400 p-2">Updated Dashboard</td>
            <td class="border border-black dark:border-lime-400 p-2">2023-10-27 10:45</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Maps 컴포넌트

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

열다 미리 보기

                <div class="bg-white bg-opacity-20 backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-50 rounded-lg p-6 shadow-lg overflow-hidden">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Dashboard</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-white bg-opacity-40 backdrop-blur-md dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-4">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Map View</h3>
            <img src="https://picsum.photos/600/300" alt="Map" class="rounded-lg w-full" />
        </div>
        <div class="bg-white bg-opacity-40 backdrop-blur-md dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-4">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">User Statistics</h3>
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-12 h-12 mr-4" />
                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-300">John Doe</p>
                    <p class="text-xl font-semibold text-gray-800 dark:text-gray-200">150 Visits</p>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-4">
        <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Map Controls</h3>
        <div class="flex justify-between mt-2">
            <button class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">Zoom In</button>
            <button class="bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800">Zoom Out</button>
        </div>
    </div>
</div>

Retro Maps 컴포넌트

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

열다 미리 보기

                <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>