검색 구성 요소

카테고리

지도

대화형 지리 지도

게임을 위한 Playful Maps 구성 요소

게임 웹사이트에 적합한 단순하고 재미있으며 반응이 빠른 지도 구성 요소로, 밝은 보석 톤, 둥근 요소 및 다크 모드 지원을 특징으로 합니다.

                <div class="p-4 sm:p-8 bg-gradient-to-br from-emerald-100 to-teal-100 dark:from-gray-800 dark:to-gray-950 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-gradient-to-br from-purple-200 to-indigo-200 dark:from-purple-900 dark:to-indigo-950 rounded-3xl shadow-2xl p-6 sm:p-8 transform hover:scale-105 transition duration-300 ease-in-out border-4 border-white dark:border-gray-700 overflow-hidden">
    <div class="flex flex-col md:flex-row gap-6 sm:gap-8 items-center">
      <div class="flex-shrink-0 w-full md:w-1/2 p-2 bg-white dark:bg-gray-800 rounded-2xl shadow-lg transform hover:rotate-2 transition duration-200 ease-in-out">
        <img src="https://picsum.photos/600/400?random=1" alt="Game Map Screenshot" class="w-full h-auto rounded-xl object-cover border-2 border-indigo-400 dark:border-indigo-600 shadow-md">
      </div>
      <div class="flex-grow text-center md:text-left">
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-indigo-800 dark:text-indigo-300 mb-3 sm:mb-4 leading-tight tracking-tight drop-shadow-lg">
          Explore <span class="text-fuchsia-600 dark:text-fuchsia-400">Mystic</span> Realms
        </h2>
        <p class="text-lg sm:text-xl text-indigo-700 dark:text-indigo-200 mb-6 sm:mb-8 max-w-lg mx-auto md:mx-0">
          Embark on epic quests and discover hidden treasures across vibrant landscapes. Your next adventure awaits!
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
          <button class="px-8 py-3 bg-fuchsia-500 hover:bg-fuchsia-600 text-white rounded-full font-bold text-lg shadow-lg transform hover:scale-105 hover:rotate-1 transition duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-fuchsia-300 dark:focus:ring-fuchsia-700">
            View All Maps
          </button>
          <button class="px-8 py-3 bg-emerald-500 hover:bg-emerald-600 text-white rounded-full font-bold text-lg shadow-lg transform hover:scale-105 hover:-rotate-1 transition duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-700">
            Start Adventure
          </button>
        </div>
      </div>
    </div>
    <div class="mt-8 sm:mt-10 pt-6 border-t-2 border-indigo-300 dark:border-indigo-800 text-center">
      <h3 class="text-xl sm:text-2xl font-bold text-purple-800 dark:text-purple-300 mb-4">Popular Zones</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 sm:gap-6">
        <div class="p-3 sm:p-4 bg-white dark:bg-gray-800 rounded-xl shadow-md transform hover:translate-y-1 transition duration-200 ease-in-out border-2 border-purple-300 dark:border-purple-700 group cursor-pointer">
          <img src="https://picsum.photos/100/100?random=2" alt="Zone 1" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full mx-auto mb-2 object-cover border-2 border-emerald-400 dark:border-emerald-600 group-hover:scale-110 transition duration-200">
          <p class="text-sm sm:text-base font-semibold text-indigo-700 dark:text-indigo-200">Sunken City</p>
        </div>
        <div class="p-3 sm:p-4 bg-white dark:bg-gray-800 rounded-xl shadow-md transform hover:translate-y-1 transition duration-200 ease-in-out border-2 border-purple-300 dark:border-purple-700 group cursor-pointer">
          <img src="https://picsum.photos/100/100?random=3" alt="Zone 2" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full mx-auto mb-2 object-cover border-2 border-emerald-400 dark:border-emerald-600 group-hover:scale-110 transition duration-200">
          <p class="text-sm sm:text-base font-semibold text-indigo-700 dark:text-indigo-200">Dragon's Peak</p>
        </div>
        <div class="p-3 sm:p-4 bg-white dark:bg-gray-800 rounded-xl shadow-md transform hover:translate-y-1 transition duration-200 ease-in-out border-2 border-purple-300 dark:border-purple-700 group cursor-pointer">
          <img src="https://picsum.photos/100/100?random=4" alt="Zone 3" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full mx-auto mb-2 object-cover border-2 border-emerald-400 dark:border-emerald-600 group-hover:scale-110 transition duration-200">
          <p class="text-sm sm:text-base font-semibold text-indigo-700 dark:text-indigo-200">Whispering Woods</p>
        </div>
        <div class="p-3 sm:p-4 bg-white dark:bg-gray-800 rounded-xl shadow-md transform hover:translate-y-1 transition duration-200 ease-in-out border-2 border-purple-300 dark:border-purple-700 group cursor-pointer">
          <img src="https://picsum.photos/100/100?random=5" alt="Zone 4" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full mx-auto mb-2 object-cover border-2 border-emerald-400 dark:border-emerald-600 group-hover:scale-110 transition duration-200">
          <p class="text-sm sm:text-base font-semibold text-indigo-700 dark:text-indigo-200">Crimson Wastes</p>
        </div>
      </div>
      <div class="mt-6">
        <a href="#" class="inline-flex items-center text-indigo-700 dark:text-indigo-300 hover:text-emerald-500 dark:hover:text-emerald-400 font-semibold text-md sm:text-lg transition-colors duration-200">
          See All Zones
          <svg class="ml-2 w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </a>
      </div>
    </div>
  </div>
</div>

3D_Neon_Maps_Component

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

열다 미리 보기

                <div class="relative bg-gradient-to-br from-gray-900 to-black p-4 sm:p-8 md:p-12 min-h-screen flex items-center justify-center font-sans dark:from-zinc-950 dark:to-black">
  <div class="absolute inset-0 z-0 opacity-10 dark:opacity-5" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMTIwMCAxMjAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPGZpbHRlciBpZD0icGVyc2lzdGVudC1ub2lzZSI+CiAgICAgIDxmZXR1cmJ1bGVuY2UgdHlwZT0icGVyc2lzdGVudE5vaXNlIiBiYXNlRnJlcXVlbmNjeT0iLjgiIG51bU9jdGF2ZXM9IjMiIHNlZWQ9IjAiIHN0aXRjaFRpbGVzPSJub2lzdVBhZGRpbmciLz4KICAgICAgPGZlYXR1cmJ1bGVuY2UgdHlwZT0icGVyc2lzdGVudE5vaXNlIiBiYXNlRnJlcXVlbmNjeT0iLjE1IiBudW1PY3RhdmVzPSIxIiBzZWVkPSIxIiBzdGl0Y2hUaWxlcz0ibm9pc3VBZGRpbmciLz4KICAgICAgPGZlYXR1cmJ1bGVuY2UgdHlwZT0icGVyc2lzdGVudE5vaXNlIiBiYXNlRnJlcXVlbmNjeT0iLjA1IiBudW1PY3RhdmVzPSIxIiBzZWVkPSIzIiBzdGl0Y2hUaWxlcz0ibm9pc3VBZGRpbmciLz4KICAgIDwvZmlsdGVyPgogICAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0icHVycGxlIiBmaWx0ZXI9InVybCgjcGVyc2lzdGVudC1ub2lzZSkiLz4KPC9zdmc+'); background-size: cover; background-repeat: no-repeat; mask-image: radial-gradient(circle at center, black 0%, transparent 70%);"></div>
  <div class="relative z-10 w-full max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8">

    <!-- Left Controls Panel (3D Effect) -->
    <div class="col-span-1 rounded-2xl p-6 lg:p-8 shadow-2xl flex flex-col gap-6
                bg-gradient-to-br from-[#1a1a2e] to-[#0f0f1d] border-b-2 border-l-2 border-[#8A2BE2] transform perspective-1000 rotate-x-6 rotate-y-2 translate-z-10
                hover:rotate-x-0 hover:rotate-y-0 hover:translate-z-0 transition-all duration-500 ease-in-out
                dark:from-[#08081a] dark:to-[#02020a] dark:border-[#FF1493]">

      <!-- Header -->
      <div class="flex items-center justify-between pb-4 border-b-2 border-dotted border-[#6A0DAD] dark:border-[#FF69B4]">
        <h2 class="text-2xl sm:text-3xl font-extrabold text-[#7FFFD4] dark:text-[#00FFFF] drop-shadow-lg [text-shadow:0_0_8px_#00FFFF]">GRID LOCATIONS</h2>
        <button class="p-2 rounded-full bg-[#39FF14] text-gray-900 shadow-lg glow-md hover:scale-110 active:scale-95 transition-all duration-300">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path></svg>
        </button>
      </div>

      <!-- Search Bar -->
      <div class="relative">
        <input type="text" placeholder="Search locations..." class="w-full p-3 pl-10 rounded-xl bg-[#0f0f1d] border border-[#39FF14] text-[#7FFFD4] placeholder-[#00FFFF] text-lg outline-none focus:ring-2 focus:ring-[#39FF14] transition-all duration-300 shadow-inner glow-sm-input
                  dark:bg-[#02020a] dark:border-[#FF69B4] dark:text-[#FF1493] dark:placeholder-[#FF1493]">
        <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-[#39FF14] dark:text-[#FF69B4]" fill="currentColor" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>
      </div>

      <!-- Location List -->
      <div class="overflow-y-auto flex-grow scrollbar-hide space-y-4 pr-1">

        <!-- Location Item -->
        <div class="p-4 rounded-xl bg-gradient-to-tr from-[#0f0f1d] to-[#1a1a2e] border-l-4 border-[#00FFFF] shadow-lg glow-sm transition-all duration-300 hover:scale-[1.02] cursor-pointer
                    dark:from-[#02020a] dark:to-[#08081a] dark:border-[#FF1493]">
          <h3 class="text-xl font-bold text-[#7FFFD4] dark:text-[#FFF] mb-1 drop-shadow-md">Cyber City Outpost</h3>
          <p class="text-sm text-[#AAAAAA] dark:text-[#CCC] opacity-80 mb-2">42 Neo-Tokyo St., Sector 7G</p>
          <div class="flex justify-between items-center">
            <span class="text-xs font-semibold text-[#39FF14] dark:text-[#FF69B4] glow-text">ONLINE</span>
            <div class="flex -space-x-1 overflow-hidden pointer-events-none">
              <img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#00FFFF] dark:ring-[#FF1493] glow-sm-avatar" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
              <img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#00FFFF] dark:ring-[#FF1493] glow-sm-avatar" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
              <img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#00FFFF] dark:ring-[#FF1493] glow-sm-avatar" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Avatar">
            </div>
          </div>
        </div>

        <div class="p-4 rounded-xl bg-gradient-to-tr from-[#0f0f1d] to-[#1a1a2e] border-l-4 border-[#8A2BE2] shadow-lg glow-sm transition-all duration-300 hover:scale-[1.02] cursor-pointer
                    dark:from-[#02020a] dark:to-[#08081a] dark:border-[#00FFFF]">
          <h3 class="text-xl font-bold text-[#7FFFD4] dark:text-[#FFF] mb-1 drop-shadow-md">Arcade Nebula Zone</h3>
          <p class="text-sm text-[#AAAAAA] dark:text-[#CCC] opacity-80 mb-2">Level 99, Metaverse Plaza</p>
          <div class="flex justify-between items-center">
            <span class="text-xs font-semibold text-[#FF1493] glow-text">OFFLINE</span>
            <div class="flex -space-x-1 overflow-hidden pointer-events-none">
              <img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#8A2BE2] dark:ring-[#00FFFF] glow-sm-avatar" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Avatar">
              <img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#8A2BE2] dark:ring-[#00FFFF] glow-sm-avatar" src="https://randomuser.me/api/portraits/men/18.jpg" alt="Avatar">
            </div>
          </div>
        </div>

        <div class="p-4 rounded-xl bg-gradient-to-tr from-[#0f0f1d] to-[#1a1a2e] border-l-4 border-[#39FF14] shadow-lg glow-sm transition-all duration-300 hover:scale-[1.02] cursor-pointer
                    dark:from-[#02020a] dark:to-[#08081a] dark:border-[#FF69B4]">
          <h3 class="text-xl font-bold text-[#7FFFD4] dark:text-[#FFF] mb-1 drop-shadow-md">Quantum Data Hub</h3>
          <p class="text-sm text-[#AAAAAA] dark:text-[#CCC] opacity-80 mb-2">Cloud Layer Alpha-7</p>
          <div class="flex justify-between items-center">
            <span class="text-xs font-semibold text-[#7FFFD4] dark:text-[#FF1493] glow-text">ONLINE</span>
            <div class="flex -space-x-1 overflow-hidden pointer-events-none">
              <img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#39FF14] dark:ring-[#FF69B4] glow-sm-avatar" src="https://randomuser.me/api/portraits/women/11.jpg" alt="Avatar">
              <img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#39FF14] dark:ring-[#FF69B4] glow-sm-avatar" src="https://randomuser.me/api/portraits/men/9.jpg" alt="Avatar">
              <img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#39FF14] dark:ring-[#FF69B4] glow-sm-avatar" src="https://randomuser.me/api/portraits/women/27.jpg" alt="Avatar">
              <img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#39FF14] dark:ring-[#FF69B4] glow-sm-avatar" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            </div>
          </div>
        </div>

      </div>

      <!-- Filters/Actions -->
      <div class="pt-4 border-t-2 border-dotted border-[#6A0DAD] dark:border-[#FF69B4]">
        <div class="flex justify-around items-center text-sm font-semibold text-[#7FFFD4] dark:text-[#00FFFF]">
          <button class="flex flex-col items-center p-2 rounded-lg hover:bg-[#1a1a2e] dark:hover:bg-[#08081a] glow-sm-btn transition-all duration-200">
            <svg class="w-6 h-6 mb-1 text-[#39FF14] dark:text-[#FF69B4]" fill="currentColor" viewBox="0 0 24 24"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"></path></svg>
            Filters
          </button>
          <button class="flex flex-col items-center p-2 rounded-lg hover:bg-[#1a1a2e] dark:hover:bg-[#08081a] glow-sm-btn transition-all duration-200">
            <svg class="w-6 h-6 mb-1 text-[#00FFFF] dark:text-[#FF1493]" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z"></path></svg>
            Status
          </button>
          <button class="flex flex-col items-center p-2 rounded-lg hover:bg-[#1a1a2e] dark:hover:bg-[#08081a] glow-sm-btn transition-all duration-200">
            <svg class="w-6 h-6 mb-1 text-[#8A2BE2] dark:text-[#00FFFF]" fill="currentColor" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"></path></svg>
            Export
          </button>
        </div>
      </div>

    </div>

    <!-- Main Map (3D Effect) -->
    <div class="col-span-1 lg:col-span-2 rounded-2xl p-4 lg:p-6 shadow-2xl relative overflow-hidden flex items-center justify-center
                bg-gradient-to-br from-[#1a1a2e] to-[#0f0f1d] border-t-2 border-r-2 border-[#39FF14] transform perspective-1000 rotate-x-3 rotate-y-[-2deg] translate-z-10
                hover:rotate-x-0 hover:rotate-y-0 hover:translate-z-0 transition-all duration-500 ease-in-out
                dark:from-[#08081a] dark:to-[#02020a] dark:border-[#00FFFF]">
      <div class="absolute inset-0 bg-black opacity-30 dark:opacity-50 blur-lg pointer-events-none"></div>
      <div class="w-full h-full relative z-10 flex items-center justify-center p-2">
        <img src="https://picsum.photos/1200/800?random=1" alt="Placeholder Map" class="object-cover w-full h-full rounded-xl opacity-70 transform scale-10 hover:scale-105 transition-all duration-500 ease-out shadow-neon-map dark:shadow-neon-map-dark">

        <!-- Interactive Map Markers (Example) -->
        <div class="absolute top-1/4 left-1/4 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 rounded-full bg-[#00FFFF] border-2 border-white glow-marker cursor-pointer hover:scale-125 transition-transform duration-300">
          <span class="text-xs font-bold text-gray-900">A</span>
        </div>
        <div class="absolute top-3/4 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 rounded-full bg-[#39FF14] border-2 border-white glow-marker cursor-pointer hover:scale-125 transition-transform duration-300">
          <span class="text-xs font-bold text-gray-900">B</span>
        </div>
        <div class="absolute top-1/2 right-1/4 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 rounded-full bg-[#FF1493] border-2 border-white glow-marker cursor-pointer hover:scale-125 transition-transform duration-300">
          <span class="text-xs font-bold text-gray-900">C</span>
        </div>

        <!-- Overlay grid for 3D effect -->
        <div class="absolute inset-0 pointer-events-none opacity-20" style="background-image: linear-gradient(0deg, transparent 24%, rgba(57, 255, 20, 0.1) 25%, rgba(57, 255, 20, 0.1) 26%, transparent 27%, transparent 74%, rgba(57, 255, 20, 0.1) 75%, rgba(57, 255, 20, 0.1) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(57, 255, 20, 0.1) 25%, rgba(57, 255, 20, 0.1) 26%, transparent 27%, transparent 74%, rgba(57, 255, 20, 0.1) 75%, rgba(57, 255, 20, 0.1) 76%, transparent 77%, transparent); background-size: 50px 50px;"></div>

      </div>

      <!-- Map Controls -->
      <div class="absolute bottom-4 right-4 flex flex-col gap-2 p-2 rounded-xl bg-gradient-to-t from-[#0f0f1d] to-[#1a1a2e] border border-[#00FFFF] shadow-xl glow-md
                  dark:from-[#02020a] dark:to-[#08081a] dark:border-[#FF1493]">
        <button class="flex items-center justify-center w-10 h-10 rounded-full bg-[#39FF14] text-gray-900 shadow-lg glow-md hover:scale-110 active:scale-95 transition-all duration-300">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg>
        </button>
        <button class="flex items-center justify-center w-10 h-10 rounded-full bg-[#FF1493] text-gray-900 shadow-lg glow-md hover:scale-110 active:scale-95 transition-all duration-300">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M5 13h14v-2H5v2z"></path></svg>
        </button>
      </div>

      <!-- Animated Pulse effect (CSS only) -->
      <div class="absolute inset-0 pointer-events-none rounded-2xl" style="box-shadow: 0 0 100px 30px rgba(0,255,255,0.3) inset; opacity: 0.1; animation: pulse-glow-border 3s infinite alternate;"></div>
    </div>

  </div>
</div>

<!-- Custom Styles for 3D and Neon Effects (embed in <style> or a CSS file) -->
<style>
  /* Scrolbar hide */
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-hide { /* For IE, Edge and Firefox */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* 3D Perspective + Rotation for Panels */
  .perspective-1000 {
    perspective: 1000px;
  }
  .rotate-x-6 {
    transform: rotateX(6deg);
  }
  .rotate-y-2 {
    transform: rotateY(2deg);
  }
  .rotate-y-\[-2deg\] {
    transform: rotateY(-2deg);
  }
  .translate-z-10 {
    transform: translateZ(10px);
  }

  /* Neon Glow Effects */
  .glow-md {
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.7), 0 0 20px rgba(57, 255, 20, 0.5);
  }
  .dark .glow-md {
    box-shadow: 0 0 10px rgba(255, 20, 147, 0.7), 0 0 20px rgba(255, 20, 147, 0.5);
  }

  .glow-sm {
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.8), 0 0 10px rgba(138, 43, 226, 0.6);
  }
  .dark .glow-sm {
    box-shadow: 0 0 5px rgba(255, 20, 147, 0.8), 0 0 10px rgba(0, 255, 255, 0.6);
  }

  .glow-sm-input {
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.5);
  }
  .dark .glow-sm-input {
    box-shadow: 0 0 8px rgba(255, 105, 180, 0.5);
  }

  .glow-sm-btn {
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
  }
  .dark .glow-sm-btn {
    box-shadow: 0 0 5px rgba(255, 20, 147, 0.3);
  }

  .glow-sm-avatar {
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
  }
  .dark .glow-sm-avatar {
    box-shadow: 0 0 8px rgba(255, 20, 147, 0.8);
  }

  .glow-text {
    text-shadow: 0 0 5px rgba(57, 255, 20, 0.8), 0 0 10px rgba(57, 255, 20, 0.6);
  }
  .dark .glow-text {
    text-shadow: 0 0 5px rgba(255, 105, 180, 0.8), 0 0 10px rgba(255, 105, 180, 0.6);
  }

  /* Map specific glow */
  .shadow-neon-map {
    filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.7)) drop-shadow(0 0 30px rgba(138, 43, 226, 0.5));
  }
  .dark .shadow-neon-map-dark {
    filter: drop-shadow(0 0 15px rgba(255, 20, 147, 0.7)) drop-shadow(0 0 30px rgba(0, 255, 255, 0.5));
  }

  .glow-marker {
    box-shadow: 0 0 10px rgba(0, 255, 255, 1), 0 0 20px rgba(0, 255, 255, 0.8);
  }
  .glow-marker:nth-child(2) { /* Example different marker color */
    box-shadow: 0 0 10px rgba(57, 255, 20, 1), 0 0 20px rgba(57, 255, 20, 0.8);
  }
  .glow-marker:nth-child(3) { /* Example different marker color */
    box-shadow: 0 0 10px rgba(255, 20, 147, 1), 0 0 20px rgba(255, 20, 147, 0.8);
  }

  /* Pulse animation for the map border glow */
  @keyframes pulse-glow-border {
    0% { box-shadow: 0 0 100px 30px rgba(0,255,255,0.3) inset; opacity: 0.1; }
    50% { box-shadow: 0 0 120px 40px rgba(0,255,255,0.5) inset; opacity: 0.2; }
    100% { box-shadow: 0 0 100px 30px rgba(0,255,255,0.3) inset; opacity: 0.1; }
  }
  .dark @keyframes pulse-glow-border {
    0% { box-shadow: 0 0 100px 30px rgba(255,20,147,0.3) inset; opacity: 0.1; }
    50% { box-shadow: 0 0 120px 40px rgba(255,20,147,0.5) inset; opacity: 0.2; }
    100% { box-shadow: 0 0 100px 30px rgba(255,20,147,0.3) inset; opacity: 0.1; }
  }




  /* For responsiveness, adjust 3D transforms on smaller screens if needed */
  @media (max-width: 1023px) {
    .lg\:rotate-x-0 {
      transform: rotateX(0) !important;
    }
    .lg\:rotate-y-0 {
      transform: rotateY(0) !important;
    }
    .lg\:translate-z-0 {
      transform: translateZ(0) !important;
    }
    .lg\:col-span-2 {
      grid-column: span 1 / span 1 !important;
    }
  }
</style>

Maps 컴포넌트

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

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-50 dark:bg-gray-900 font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 transform hover:scale-[1.005] group">
    <div class="relative">
      <!-- Map Placeholder Image -->
      <img src="https://picsum.photos/800/400?random=1" alt="Map illustration" class="w-full h-48 sm:h-64 object-cover object-center rounded-t-xl group-hover:brightness-90 transition-all duration-300">

      <!-- Overlay for title and search -->
      <div class="absolute inset-0 bg-blue-100/60 dark:bg-blue-900/60 flex flex-col justify-between p-4 sm:p-6 rounded-t-xl">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-2 sm:space-y-0">
          <h2 class="text-2xl sm:text-3xl font-extrabold text-blue-800 dark:text-blue-100 transition-colors duration-300">
            Explore Learning Paths
          </h2>
          <div class="relative w-full sm:w-auto">
            <input type="text" placeholder="Search locations or topics..." class="w-full sm:w-64 py-2 pl-10 pr-4 text-sm bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-300 border border-gray-200 dark:border-gray-600 rounded-full focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-300 shadow-sm">
            <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
            </svg>
          </div>
        </div>
      </div>
    </div>

    <!-- Content Area: Locations/Topics -->
    <div class="p-4 sm:p-6 grid grid-cols-1 md:grid-cols-2 gap-4">
      <!-- Location Card 1 -->
      <div class="group relative bg-blue-50 dark:bg-gray-700 rounded-lg p-4 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-md border border-blue-100 dark:border-gray-600 focus-within:ring-2 focus-within:ring-blue-300">
        <span class="absolute inset-0 rounded-lg border-2 border-transparent group-hover:border-blue-300 dark:group-hover:border-blue-500 transition-colors duration-300 pointer-events-none"></span>
        <div class="flex items-start">
          <div class="flex-shrink-0 relative w-16 h-16 rounded-full overflow-hidden mr-4 shadow-sm">
            <img src="https://picsum.photos/100/100?random=2" alt="Topic image" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-400/20 dark:bg-blue-600/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </div>
          <div>
            <h3 class="text-lg font-semibold text-blue-700 dark:text-blue-200 group-hover:text-blue-800 dark:group-hover:text-blue-100 transition-colors duration-300">Introduction to AI</h3>
            <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Explore foundational concepts and applications of artificial intelligence.</p>
            <a href="#" class="mt-2 inline-flex items-center text-blue-500 dark:text-blue-300 text-sm font-medium hover:underline hover:text-blue-600 dark:hover:text-blue-200 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 rounded-md">
              View Course
              <svg class="ml-1 w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Location Card 2 -->
      <div class="group relative bg-green-50 dark:bg-gray-700 rounded-lg p-4 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-md border border-green-100 dark:border-gray-600 focus-within:ring-2 focus-within:ring-green-300">
        <span class="absolute inset-0 rounded-lg border-2 border-transparent group-hover:border-green-300 dark:group-hover:border-green-500 transition-colors duration-300 pointer-events-none"></span>
        <div class="flex items-start">
          <div class="flex-shrink-0 relative w-16 h-16 rounded-full overflow-hidden mr-4 shadow-sm">
            <img src="https://picsum.photos/100/100?random=3" alt="Topic image" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
            <div class="absolute inset-0 bg-green-400/20 dark:bg-green-600/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </div>
          <div>
            <h3 class="text-lg font-semibold text-green-700 dark:text-green-200 group-hover:text-green-800 dark:group-hover:text-green-100 transition-colors duration-300">Data Science Fundamentals</h3>
            <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Learn the basics of data analysis, visualization, and machine learning.</p>
            <a href="#" class="mt-2 inline-flex items-center text-green-500 dark:text-green-300 text-sm font-medium hover:underline hover:text-green-600 dark:hover:text-green-200 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 rounded-md">
              View Course
              <svg class="ml-1 w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Location Card 3 -->
      <div class="group relative bg-purple-50 dark:bg-gray-700 rounded-lg p-4 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-md border border-purple-100 dark:border-gray-600 focus-within:ring-2 focus-within:ring-purple-300">
        <span class="absolute inset-0 rounded-lg border-2 border-transparent group-hover:border-purple-300 dark:group-hover:border-purple-500 transition-colors duration-300 pointer-events-none"></span>
        <div class="flex items-start">
          <div class="flex-shrink-0 relative w-16 h-16 rounded-full overflow-hidden mr-4 shadow-sm">
            <img src="https://picsum.photos/100/100?random=4" alt="Topic image" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
            <div class="absolute inset-0 bg-purple-400/20 dark:bg-purple-600/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </div>
          <div>
            <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-200 group-hover:text-purple-800 dark:group-hover:text-purple-100 transition-colors duration-300">Web Development Bootcamp</h3>
            <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Master frontend and backend development with hands-on projects.</p>
            <a href="#" class="mt-2 inline-flex items-center text-purple-500 dark:text-purple-300 text-sm font-medium hover:underline hover:text-purple-600 dark:hover:text-purple-200 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 rounded-md">
              View Course
              <svg class="ml-1 w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Location Card 4 -->
      <div class="group relative bg-pink-50 dark:bg-gray-700 rounded-lg p-4 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-md border border-pink-100 dark:border-gray-600 focus-within:ring-2 focus-within:ring-pink-300">
        <span class="absolute inset-0 rounded-lg border-2 border-transparent group-hover:border-pink-300 dark:group-hover:border-pink-500 transition-colors duration-300 pointer-events-none"></span>
        <div class="flex items-start">
          <div class="flex-shrink-0 relative w-16 h-16 rounded-full overflow-hidden mr-4 shadow-sm">
            <img src="https://picsum.photos/100/100?random=5" alt="Topic image" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
            <div class="absolute inset-0 bg-pink-400/20 dark:bg-pink-600/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </div>
          <div>
            <h3 class="text-lg font-semibold text-pink-700 dark:text-pink-200 group-hover:text-pink-800 dark:group-hover:text-pink-100 transition-colors duration-300">Creative Writing Workshop</h3>
            <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Unleash your imagination and refine your storytelling skills.</p>
            <a href="#" class="mt-2 inline-flex items-center text-pink-500 dark:text-pink-300 text-sm font-medium hover:underline hover:text-pink-600 dark:hover:text-pink-200 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-pink-400 focus:ring-offset-2 rounded-md">
              View Course
              <svg class="ml-1 w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Call to Action/Footer -->
    <div class="p-4 sm:p-6 bg-gray-100 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-600 flex justify-center">
      <button class="px-6 py-3 bg-blue-500 text-white font-semibold rounded-full shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-all duration-300 transform hover:-translate-y-0.5 active:translate-y-0 active:scale-98">
        Discover More Paths
      </button>
    </div>
  </div>
</div>

LuxuryFoodMaps구성 요소

캔디 테마의 색 구성표가 있는 우아하고 반응이 빠른 음식/레스토랑 지도 구성 요소로, 다크 모드 지원을 포함하여 데스크톱, 태블릿 및 모바일에 적합합니다. 눈에 잘 띄는 지도 영역과 프리미엄 레스토랑 위치 목록이 있습니다.

열다 미리 보기

                <div class="font-sans antialiased text-gray-800 dark:text-gray-100 bg-gradient-to-br from-pink-50 via-purple-50 to-indigo-50 dark:from-gray-950 dark:via-gray-900 dark:to-gray-850 p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen">

  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden animate-fade-in transition-all duration-500 transform hover:scale-[1.005]">
    <div class="md:flex md:h-[600px] lg:h-[700px]">

      <!-- Left Section: Map -->
      <div class="md:w-3/5 bg-gray-200 dark:bg-gray-700 h-96 md:h-auto overflow-hidden relative">
        <iframe
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.259902636712!2d-73.98565158459423!3d40.74844057932785!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a542e7!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1678912345678!5m2!1sen!2sus"
          width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"
          referrerpolicy="no-referrer-when-downgrade" aria-label="Interactive map showing restaurant locations.">
        </iframe>
        <div class="absolute top-4 left-4 p-3 bg-white dark:bg-gray-900 rounded-full shadow-lg flex items-center space-x-2 text-sm font-semibold opacity-90 backdrop-blur-sm">
            <svg class="w-5 h-5 text-pink-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
            <span class="text-gray-700 dark:text-gray-300">Explore nearby flavors</span>
        </div>
      </div>

      <!-- Right Section: Restaurant List -->
      <div class="md:w-2/5 p-6 sm:p-8 lg:p-10 flex flex-col justify-between">
        <div>
          <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-pink-600 dark:text-pink-400 mb-4 tracking-tight leading-tight">
            <span class="block">Sweet Spots.</span>
            <span class="block text-purple-600 dark:text-purple-400">Savory Treats.</span>
          </h2>
          <p class="text-lg sm:text-xl text-gray-500 dark:text-gray-400 mb-8">
            Discover premium culinary experiences near you. From delightful desserts to gourmet dinners.
          </p>

          <div class="space-y-6 max-h-96 md:max-h-[calc(100vh-300px)] overflow-y-auto pr-2 scrollbar-thumb-pink-300 scrollbar-track-purple-100 dark:scrollbar-thumb-pink-700 dark:scrollbar-track-purple-900 scrollbar-w-2">

            <!-- Restaurant Card 1 -->
            <div class="flex items-start space-x-4 p-4 rounded-xl shadow-md bg-pink-50 dark:bg-gray-700 border border-transparent hover:border-pink-300 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
              <img src="https://picsum.photos/80/80?random=1" alt="Restaurant Image" class="w-20 h-20 object-cover rounded-lg shadow-sm flex-shrink-0">
              <div>
                <h3 class="text-xl font-bold text-gray-900 dark:text-white">The Sugar Plum Bistro</h3>
                <p class="text-gray-600 dark:text-gray-300 text-sm">123 Candyland Rd, Suite A</p>
                <div class="flex items-center mt-1">
                  <span class="text-yellow-500 text-lg">★★★★★</span>
                  <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">(4.9)</span>
                </div>
                <button class="mt-3 px-4 py-2 bg-gradient-to-r from-pink-500 to-purple-500 text-white text-sm font-semibold rounded-full shadow-lg hover:from-pink-600 hover:to-purple-600 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-pink-300">
                  View Details
                </button>
              </div>
            </div>

            <!-- Restaurant Card 2 -->
            <div class="flex items-start space-x-4 p-4 rounded-xl shadow-md bg-purple-50 dark:bg-gray-700 border border-transparent hover:border-purple-300 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
              <img src="https://picsum.photos/80/80?random=2" alt="Restaurant Image" class="w-20 h-20 object-cover rounded-lg shadow-sm flex-shrink-0">
              <div>
                <h3 class="text-xl font-bold text-gray-900 dark:text-white">Mint & Basil Eatery</h3>
                <p class="text-gray-600 dark:text-gray-300 text-sm">456 Green Street, Level 2</p>
                <div class="flex items-center mt-1">
                  <span class="text-yellow-500 text-lg">★★★★☆</span>
                  <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">(4.5)</span>
                </div>
                <button class="mt-3 px-4 py-2 bg-gradient-to-r from-purple-500 to-indigo-500 text-white text-sm font-semibold rounded-full shadow-lg hover:from-purple-600 hover:to-indigo-600 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-300">
                  View Details
                </button>
              </div>
            </div>

            <!-- Restaurant Card 3 -->
            <div class="flex items-start space-x-4 p-4 rounded-xl shadow-md bg-blue-50 dark:bg-gray-700 border border-transparent hover:border-blue-300 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
              <img src="https://picsum.photos/80/80?random=3" alt="Restaurant Image" class="w-20 h-20 object-cover rounded-lg shadow-sm flex-shrink-0">
              <div>
                <h3 class="text-xl font-bold text-gray-900 dark:text-white">Gourmet Glaze Cafe</h3>
                <p class="text-gray-600 dark:text-gray-300 text-sm">789 Sweet Avenue, Unit B</p>
                <div class="flex items-center mt-1">
                  <span class="text-yellow-500 text-lg">★★★★★</span>
                  <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">(4.8)</span>
                </div>
                <button class="mt-3 px-4 py-2 bg-gradient-to-r from-blue-500 to-pink-500 text-white text-sm font-semibold rounded-full shadow-lg hover:from-blue-600 hover:to-pink-600 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
                  View Details
                </button>
              </div>
            </div>
            
            <!-- Restaurant Card 4 -->
            <div class="flex items-start space-x-4 p-4 rounded-xl shadow-md bg-green-50 dark:bg-gray-700 border border-transparent hover:border-green-300 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
              <img src="https://picsum.photos/80/80?random=4" alt="Restaurant Image" class="w-20 h-20 object-cover rounded-lg shadow-sm flex-shrink-0">
              <div>
                <h3 class="text-xl font-bold text-gray-900 dark:text-white">Jelly Bean Junction</h3>
                <p class="text-gray-600 dark:text-gray-300 text-sm">101 Lollipop Lane, Apt 1</p>
                <div class="flex items-center mt-1">
                  <span class="text-yellow-500 text-lg">★★★★☆</span>
                  <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">(4.6)</span>
                </div>
                <button class="mt-3 px-4 py-2 bg-gradient-to-r from-green-500 to-blue-500 text-white text-sm font-semibold rounded-full shadow-lg hover:from-green-600 hover:to-blue-600 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-green-300">
                  View Details
                </button>
              </div>
            </div>

          </div>
        </div>

        <div class="mt-8 flex justify-center">
          <button class="px-8 py-4 bg-gradient-to-r from-pink-500 to-purple-600 text-white text-lg font-bold rounded-full shadow-lg hover:from-pink-600 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-700">
            Find More Restaurants
          </button>
        </div>
      </div>

    </div>
  </div>

</div>

<!-- Custom scrollbar styles for demonstration/specificity -- provided it's configured in Tailwind config for utility classes -->
<style>
  /* For Webkit browsers (Chrome, Safari) */
  .scrollbar-w-2::-webkit-scrollbar {
    width: 8px;
  }

  .scrollbar-track-purple-100::-webkit-scrollbar-track {
    background: #f3e8ff;
  }

  .scrollbar-thumb-pink-300::-webkit-scrollbar-thumb {
    background-color: #fbcfe8;
    border-radius: 20px;
    border: 2px solid #f3e8ff;
  }

  .dark .scrollbar-track-purple-900::-webkit-scrollbar-track {
    background: #2a0c4e;
  }

  .dark .scrollbar-thumb-pink-700::-webkit-scrollbar-thumb {
    background-color: #be185d;
    border-radius: 20px;
    border: 2px solid #2a0c4e;
  }
</style>

MemphisMapsComponent_CryptoBlockchain

복잡하고 반응이 빠른 '멤피스 디자인(Memphis Design)'에서 영감을 받은 암호 화폐/블록체인 애플리케이션을 위한 지도 구성 요소로, 대담한 색상, 기하학적 모양 및 따뜻한 일몰 색 구성표를 특징으로 합니다. 다크 모드 지원 및 대화형 요소가 포함됩니다.

열다 미리 보기

                <div class="font-sans min-h-screen bg-gradient-to-br from-orange-50 to-amber-100 text-gray-900 dark:from-gray-900 dark:to-gray-950 dark:text-gray-100 p-4 sm:p-8 flex items-center justify-center">
  <div class="w-full max-w-6xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden animate-fade-in border-4 border-yellow-400 dark:border-purple-600 relative">
    <!-- Memphis Pattern Background -->
    <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/60 to-orange-400/60 dark:from-purple-600/60 dark:to-violet-800/60 opacity-30 dark:opacity-20 z-0">
      <div class="absolute top-10 left-10 w-24 h-24 bg-red-400 dark:bg-pink-500 rounded-full animate-pulse-slow"></div>
      <div class="absolute bottom-20 right-20 w-32 h-16 bg-blue-400 dark:bg-cyan-500 transform -rotate-45"></div>
      <div class="absolute top-1/3 right-1/4 w-16 h-16 bg-green-300 dark:bg-lime-500 transform rotate-12"></div>
      <div class="absolute bottom-5 left-1/4 w-20 h-20 bg-yellow-400 dark:bg-yellow-500 rounded-lg transform rotate-6"></div>
    </div>

    <div class="relative z-10 p-6 sm:p-10 lg:grid lg:grid-cols-3 lg:gap-8">
      <!-- Left Sidebar - Controls & Filters -->
      <div class="lg:col-span-1 bg-amber-50 dark:bg-gray-700 p-6 rounded-2xl shadow-inner border-2 border-orange-200 dark:border-purple-700 animate-slide-in-left mb-6 lg:mb-0">
        <h2 class="text-3xl font-extrabold mb-6 text-orange-700 dark:text-purple-400 border-b-4 border-orange-400 dark:border-purple-600 pb-2">Crypto Hub Explorer</h2>

        <div class="mb-6">
          <label for="search" class="block text-sm font-semibold mb-2 text-gray-700 dark:text-gray-300">Search Locations</label>
          <div class="relative">
            <input type="text" id="search" placeholder="Find Exchanges, ATMs, Meetups..." class="w-full p-3 pl-10 rounded-xl bg-orange-100 dark:bg-gray-600 border border-orange-300 dark:border-purple-800 focus:ring-2 focus:ring-yellow-400 focus:border-transparent transition-all pr-4 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
            <svg class="absolute left-3 top-1/2 -translate-y-1/2 text-orange-500 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
          </div>
        </div>

        <div class="mb-6">
          <h3 class="text-lg font-semibold mb-3 text-gray-800 dark:text-gray-200">Filter by Type</h3>
          <div class="grid grid-cols-2 gap-3">
            <label class="flex items-center space-x-2 cursor-pointer bg-yellow-200 dark:bg-lime-600 p-3 rounded-xl border-2 border-yellow-300 dark:border-lime-700 hover:bg-yellow-300 dark:hover:bg-lime-700 transition">
              <input type="checkbox" class="form-checkbox text-orange-500 dark:text-cyan-400 rounded-lg focus:ring-orange-400 h-6 w-6 border-2 border-orange-400 dark:border-cyan-500">
              <span class="text-sm font-medium text-gray-700 dark:text-gray-100">Exchanges</span>
            </label>
            <label class="flex items-center space-x-2 cursor-pointer bg-orange-200 dark:bg-purple-600 p-3 rounded-xl border-2 border-orange-300 dark:border-purple-700 hover:bg-orange-300 dark:hover:bg-purple-700 transition">
              <input type="checkbox" class="form-checkbox text-red-500 dark:text-pink-400 rounded-lg focus:ring-red-400 h-6 w-6 border-2 border-red-400 dark:border-pink-500">
              <span class="text-sm font-medium text-gray-700 dark:text-gray-100">ATMs</span>
            </label>
            <label class="flex items-center space-x-2 cursor-pointer bg-red-200 dark:bg-red-600 p-3 rounded-xl border-2 border-red-300 dark:border-red-700 hover:bg-red-300 dark:hover:bg-red-700 transition">
              <input type="checkbox" class="form-checkbox text-blue-500 dark:text-blue-400 rounded-lg focus:ring-blue-400 h-6 w-6 border-2 border-blue-400 dark:border-blue-500">
              <span class="text-sm font-medium text-gray-700 dark:text-gray-100">Meetups</span>
            </label>
            <label class="flex items-center space-x-2 cursor-pointer bg-blue-200 dark:bg-blue-600 p-3 rounded-xl border-2 border-blue-300 dark:border-blue-700 hover:bg-blue-300 dark:hover:bg-blue-700 transition">
              <input type="checkbox" class="form-checkbox text-green-500 dark:text-green-400 rounded-lg focus:ring-green-400 h-6 w-6 border-2 border-green-400 dark:border-green-500">
              <span class="text-sm font-medium text-gray-700 dark:text-gray-100">Miners</span>
            </label>
          </div>
        </div>

        <div class="mb-6">
          <h3 class="text-lg font-semibold mb-3 text-gray-800 dark:text-gray-200">Top 5 Hotspots</h3>
          <ul class="space-y-3">
            <li class="flex items-center justify-between p-3 bg-red-100 dark:bg-pink-700 rounded-xl border-2 border-red-200 dark:border-pink-800 animate-slide-in-right-item">
              <span class="text-gray-800 dark:text-gray-100 font-medium">New York, USA</span>
              <span class="text-sm text-red-600 dark:text-pink-300 bg-red-200 dark:bg-pink-800 px-3 py-1 rounded-full">+120% Activity</span>
            </li>
            <li class="flex items-center justify-between p-3 bg-blue-100 dark:bg-cyan-700 rounded-xl border-2 border-blue-200 dark:border-cyan-800 animate-slide-in-right-item animate-delay-100">
              <span class="text-gray-800 dark:text-gray-100 font-medium">London, UK</span>
              <span class="text-sm text-blue-600 dark:text-cyan-300 bg-blue-200 dark:bg-cyan-800 px-3 py-1 rounded-full">+95% Activity</span>
            </li>
            <li class="flex items-center justify-between p-3 bg-green-100 dark:bg-lime-700 rounded-xl border-2 border-green-200 dark:border-lime-800 animate-slide-in-right-item animate-delay-200">
              <span class="text-gray-800 dark:text-gray-100 font-medium">Dubai, UAE</span>
              <span class="text-sm text-green-600 dark:text-lime-300 bg-green-200 dark:bg-lime-800 px-3 py-1 rounded-full">+88% Activity</span>
            </li>
          </ul>
        </div>

        <button class="w-full py-4 bg-gradient-to-r from-orange-500 to-red-500 dark:from-purple-700 dark:to-violet-900 text-white font-bold rounded-xl shadow-lg border-2 border-orange-600 dark:border-purple-800 hover:from-orange-600 hover:to-red-600 dark:hover:from-purple-800 dark:hover:to-violet-950 transition transform hover:scale-105 active:scale-95 animate-bounce-in">
          <span class="flex items-center justify-center"><svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5-5m0 0l5-5m-5 5h12a2 2 0 002-2V7a2 2 0 00-2-2h-3L9 3V2a1 1 0 00-1-1H3a1 1 0 00-1 1v12a2 2 0 002 2h5v3z"></path></svg>Discover Hotspots</span>
        </button>
      </div>

      <!-- Main Content - Map & Location Details -->
      <div class="lg:col-span-2 space-y-8">
        <div class="relative bg-gray-200 dark:bg-gray-700 rounded-2xl overflow-hidden shadow-lg aspect-w-16 aspect-h-9 sm:aspect-h-11 md:aspect-h-12 w-full border-4 border-orange-400 dark:border-purple-600 animate-zoom-in-map">
          <!-- Placeholder for the Map -->
          <img src="https://picsum.photos/seed/memphismap/1200/800" alt="Decentralized Crypto Map" class="w-full h-full object-cover rounded-2xl">
          <div class="absolute inset-0 bg-black/30 flex items-center justify-center">
            <span class="text-white text-3xl font-bold flex flex-col items-center">
              <svg class="w-10 h-10 text-yellow-300 dark:text-green-400 mb-2" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z"></path></svg>
              <span class="text-white text-3xl font-bold">Decentralized Map View</span>
            </span>
            <!-- Example of dynamic markers -->
            <div class="absolute top-1/4 left-1/4 animate-bounce-marker"><svg class="w-8 h-8 text-red-500" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z"></path></svg><span class="absolute -top-6 left-1/2 -translate-x-1/2 text-white text-xs font-semibold px-2 py-0.5 bg-red-500 rounded-md">EXCHANGE</span></div>
            <div class="absolute top-2/3 right-1/3 animate-bounce-marker animate-delay-200"><svg class="w-8 h-8 text-yellow-500" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z"></path></svg><span class="absolute -top-6 left-1/2 -translate-x-1/2 text-white text-xs font-semibold px-2 py-0.5 bg-yellow-500 rounded-md">ATM</span></div>
          </div>
        </div>

        <!-- Recent Discoveries / Hotspot Details -->
        <div class="bg-orange-50 dark:bg-gray-700 p-6 rounded-2xl shadow-inner border-2 border-red-300 dark:border-pink-800 animate-slide-in-right">
          <h3 class="text-2xl font-bold mb-4 text-red-700 dark:text-pink-400 border-b-4 border-red-400 dark:border-pink-600 pb-2">Featured Spot: BlockBuilders Inc.</h3>
          <div class="md:flex items-center space-y-4 md:space-y-0 md:space-x-6">
            <img src="https://picsum.photos/seed/cryptooffice/300/200" alt="BlockBuilders Inc." class="flex-shrink-0 w-full md:w-48 h-32 object-cover rounded-xl shadow-md border-2 border-orange-400 dark:border-purple-600">
            <div>
              <p class="text-gray-700 dark:text-gray-300 mb-2">Leading blockchain development hub and co-working space.</p>
              <div class="flex items-center text-sm mb-2 text-gray-600 dark:text-gray-400">
                <svg class="w-4 h-4 mr-1 text-red-500 dark:text-pink-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z"></path></svg>
                <span>123 Chainlink Ave, Metropolis, CA</span>
              </div>
              <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Open Mon-Fri, 9 AM - 6 PM</p>
              <div class="flex space-x-3">
                <span class="px-3 py-1 bg-gradient-to-r from-yellow-300 to-orange-400 dark:from-purple-500 dark:to-pink-600 text-yellow-800 dark:text-white text-xs font-semibold rounded-full shadow-md">Development Hub</span>
                <span class="px-3 py-1 bg-gradient-to-r from-blue-300 to-cyan-400 dark:from-violet-500 dark:to-blue-600 text-blue-800 dark:text-white text-xs font-semibold rounded-full shadow-md">Community Meetups</span>
              </div>
            </div>
          </div>

          <div class="mt-6">
            <h4 class="text-xl font-bold mb-3 text-gray-800 dark:text-gray-200">Recent Activity</h4>
            <ul class="space-y-3">
              <li class="flex items-center space-x-3 bg-red-50 dark:bg-pink-900 p-3 rounded-lg border border-red-200 dark:border-pink-800 animate-pop-in">
                <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-red-400 dark:border-pink-500">
                <p class="text-gray-700 dark:text-gray-200 text-sm"><span class="font-semibold text-red-600 dark:text-pink-300">Alice Smith</span> checked in for 'ERC-20 Workshop'.</p>
                <span class="ml-auto text-xs text-gray-500 dark:text-gray-400">2 hours ago</span>
              </li>
              <li class="flex items-center space-x-3 bg-blue-50 dark:bg-cyan-900 p-3 rounded-lg border border-blue-200 dark:border-cyan-800 animate-pop-in animate-delay-100">
                <img src="https://randomuser.me/api/portraits/men/8.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-cyan-500">
                <p class="text-gray-700 dark:text-gray-200 text-sm"><span class="font-semibold text-blue-600 dark:text-cyan-300">Bob Johnson</span> used the BTC ATM.</p>
                <span class="ml-auto text-xs text-gray-500 dark:text-gray-400">5 hours ago</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Tailwind CSS Keyframes for Animations -->
<style>
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in {
    animation: fade-in 0.8s ease-out forwards;
  }

  @keyframes slide-in-left {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
  }
  .animate-slide-in-left {
    animation: slide-in-left 0.7s ease-out forwards;
  }

  @keyframes slide-in-right {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
  }
  .animate-slide-in-right {
    animation: slide-in-right 0.7s ease-out forwards;
  }

  @keyframes slide-in-right-item {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
  }
  .animate-slide-in-right-item {
    animation: slide-in-right-item 0.4s ease-out forwards;
  }

  @keyframes zoom-in-map {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
  }
  .animate-zoom-in-map {
    animation: zoom-in-map 0.6s ease-out forwards;
  }

  @keyframes bounce-in {
    0% { transform: scale(0.9); opacity: 0; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
  }
  .animate-bounce-in {
    animation: bounce-in 0.5s ease-out forwards;
  }

  @keyframes pop-in {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
  }
  .animate-pop-in {
    animation: pop-in 0.4s ease-out forwards;
  }

  @keyframes bounce-marker {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
  .animate-bounce-marker {
    animation: bounce-marker 1.5s infinite ease-in-out;
  }

  @keyframes pulse-slow {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.05); opacity: 1; }
  }
  .animate-pulse-slow {
    animation: pulse-slow 3s infinite ease-in-out;
  }

  .animate-delay-100 { animation-delay: 0.1s; }
  .animate-delay-200 { animation-delay: 0.2s; }
  .animate-delay-300 { animation-delay: 0.3s; }

  /* Aspect Ratio Utility (for map container) */
  .aspect-w-16 {
    position: relative;
    width: 100%;
  }
  .aspect-w-16::before {
    content: '';
    display: block;
    padding-bottom: calc(100% / (16 / 9));
  }
  .aspect-w-16 > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
  .aspect-h-9::before { padding-bottom: calc(100% / (16 / 9)); }
  @media (min-width: 640px) {
    .sm\:aspect-h-11::before { padding-bottom: calc(100% / (16 / 11)); }
  }
  @media (min-width: 768px) {
    .md\:aspect-h-12::before { padding-bottom: calc(100% / (16 / 12)); }
  }

  /* Custom Form Checkbox Styles */
  .form-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    user-select: none;
    flex-shrink: 0;
    height: 1.5rem;
    width: 1.5rem;
    border-radius: 0.5rem; /* rounded-lg */
    border-width: 2px; /* border-2 */
    background-color: transparent;
    transition: background-color 0.2s, border-color 0.2s;
  }
  .form-checkbox:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 00-1.414 0L7 8.586 4.207 5.793a1 1 0 00-1.414 1.414l3.5 3.5a1 1 0 001.414 0l5-5a1 1 0 000-1.414z'/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
  .form-checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(196, 181, 253, 0.5); /* example focus ring */
  }
  .form-checkbox.text-orange-500:checked {
    background-color: #f97316; /* orange-500 */
    border-color: #f97316;
  }
  .form-checkbox.text-red-500:checked {
    background-color: #ef4444; /* red-500 */
    border-color: #ef4444;
  }
  .form-checkbox.text-blue-500:checked {
    background-color: #3b82f6; /* blue-500 */
    border-color: #3b82f6;
  }
  .form-checkbox.text-green-500:checked {
    background-color: #22c55e; /* green-500 */
    border-color: #22c55e;
  }

  .dark .form-checkbox.text-cyan-400:checked {
    background-color: #22d3ee; /* cyan-400 */
    border-color: #22d3ee;
  }
  .dark .form-checkbox.text-pink-400:checked {
    background-color: #f472b6; /* pink-400 */
    border-color: #f472b6;
  }
  .dark .form-checkbox.text-blue-400:checked {
    background-color: #60a5fa; /* blue-400 */
    border-color: #60a5fa;
  }
  .dark .form-checkbox.text-green-400:checked {
    background-color: #4ade80; /* green-400 */
    border-color: #4ade80;
  }
</style>

Brutalism_Photography_Maps_Component

사진 포트폴리오를 위한 단순하고 브루탈리즘 스타일의 지도 구성 요소로, 높은 대비와 어두운 모드를 지원하는 대담한 보라색 색 구성표가 특징입니다.

열다 미리 보기

                <div class="p-4 sm:p-6 md:p-8 bg-violet-200 dark:bg-violet-950 text-violet-900 dark:text-violet-100 font-mono min-h-screen">
  <h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold mb-6 sm:mb-8 tracking-tighter uppercase border-b-4 border-violet-900 dark:border-violet-400 pb-2">
    Photographic Locations // Map<span class="text-violet-700 dark:text-violet-400">.</span>Focus
  </h2>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 lg:gap-10">
    <!-- Map Placeholder Section -->
    <div class="relative bg-violet-400 dark:bg-violet-800 border-4 border-violet-900 dark:border-violet-400 overflow-hidden group">
      <img src="https://picsum.photos/id/1080/800/600" alt="Abstract map visual" class="w-full h-64 sm:h-80 md:h-96 object-cover object-center transform transition-transform duration-500 group-hover:scale-105 saturate-150 brightness-75">
      <div class="absolute inset-0 bg-gradient-to-t from-violet-900 via-transparent to-transparent opacity-80 dark:from-violet-950 dark:opacity-90"></div>
      <div class="absolute bottom-0 left-0 p-4 sm:p-6 text-violet-100 tracking-tighter">
        <p class="text-xl sm:text-2xl font-bold uppercase mb-1 drop-shadow-lg">[Location: Unknown]</p>
        <p class="text-sm sm:text-base font-light opacity-80 drop-shadow-lg">Coordinates: [DATA REDACTED]</p>
      </div>
      <div class="absolute top-4 right-4 text-violet-900 dark:text-violet-200 bg-violet-200 dark:bg-violet-700 px-3 py-1 text-sm font-bold border-2 border-violet-900 dark:border-violet-400 uppercase">
        Interactive View Coming.
      </div>
    </div>

    <!-- Location List / Details -->
    <div class="bg-violet-400 dark:bg-violet-800 border-4 border-violet-900 dark:border-violet-400 p-4 sm:p-6 lg:p-8">
      <h3 class="text-xl sm:text-2xl font-extrabold uppercase mb-4 border-b-2 border-violet-900 dark:border-violet-400 pb-1">Selected Locations // Shots.</h3>
      <ul class="space-y-4 sm:space-y-5">
        <li class="flex items-start gap-3 bg-violet-300 dark:bg-violet-700 p-3 sm:p-4 border-2 border-violet-900 dark:border-violet-400 transition-transform duration-300 hover:scale-[1.02] transform skew-x-[-2deg] hover:skew-x-0">
          <span class="text-3xl font-extrabold text-violet-900 dark:text-violet-100 flex-shrink-0">01.</span>
          <div>
            <p class="font-bold text-lg sm:text-xl uppercase leading-tight">Urban Sprawl</p>
            <p class="text-sm sm:text-base font-light text-violet-800 dark:text-violet-200">Downtown Concrete. 2023.</p>
          </div>
        </li>
        <li class="flex items-start gap-3 bg-violet-300 dark:bg-violet-700 p-3 sm:p-4 border-2 border-violet-900 dark:border-violet-400 transition-transform duration-300 hover:scale-[1.02] transform skew-x-[2deg] hover:skew-x-0">
          <span class="text-3xl font-extrabold text-violet-900 dark:text-violet-100 flex-shrink-0">02.</span>
          <div>
            <p class="font-bold text-lg sm:text-xl uppercase leading-tight">Coastal Edge</p>
            <p class="text-sm sm:text-base font-light text-violet-800 dark:text-violet-200">Sea Storm Horizon. 2022.</p>
          </div>
        </li>
        <li class="flex items-start gap-3 bg-violet-300 dark:bg-violet-700 p-3 sm:p-4 border-2 border-violet-900 dark:border-violet-400 transition-transform duration-300 hover:scale-[1.02] transform skew-x-[-2deg] hover:skew-x-0">
          <span class="text-3xl font-extrabold text-violet-900 dark:text-violet-100 flex-shrink-0">03.</span>
          <div>
            <p class="font-bold text-lg sm:text-xl uppercase leading-tight">Desert Solitude</p>
            <p class="text-sm sm:text-base font-light text-violet-800 dark:text-violet-200">Vast Sands, Empty Skies. 2020.</p>
          </div>
        </li>
        <li class="flex items-start gap-3 bg-violet-300 dark:bg-violet-700 p-3 sm:p-4 border-2 border-violet-900 dark:border-violet-400 transition-transform duration-300 hover:scale-[1.02] transform skew-x-[2deg] hover:skew-x-0">
          <span class="text-3xl font-extrabold text-violet-900 dark:text-violet-100 flex-shrink-0">04.</span>
          <div>
            <p class="font-bold text-lg sm:text-xl uppercase leading-tight">Forest Veil</p>
            <p class="text-sm sm:text-base font-light text-violet-800 dark:text-violet-200">Deep Woods Mystique. 2021.</p>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <div class="mt-8 sm:mt-10 text-center">
    <button class="px-6 py-3 sm:px-8 sm:py-4 bg-violet-900 dark:bg-violet-400 text-violet-100 dark:text-violet-900 text-lg sm:text-xl font-bold uppercase border-4 border-violet-900 dark:border-violet-400 shadow-[8px_8px_0px_rgba(79,0,172,1)] dark:shadow-[8px_8px_0px_rgba(139,92,246,1)] transition-all duration-200 hover:shadow-[4px_4px_0px_rgba(79,0,172,1)] dark:hover:shadow-[4px_4px_0px_rgba(139,92,246,1)]">
      Explore More Locations // Get.Dirty
    </button>
  </div>
</div>

산업VibrantMapsComponent

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

열다 미리 보기

                <div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans">

  <!-- Component Container -->
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border-t-4 border-fuchsia-600 dark:border-fuchsia-500">

    <!-- Header Section -->
    <div class="p-4 sm:p-6 bg-gray-100 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600 flex flex-col sm:flex-row items-center justify-between">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white mb-2 sm:mb-0">
        Industrial Site Overview
      </h2>
      <div class="flex space-x-2">
        <button class="px-4 py-2 bg-fuchsia-600 dark:bg-fuchsia-500 text-white rounded-md text-sm font-semibold hover:bg-fuchsia-700 dark:hover:bg-fuchsia-600 transition duration-300">
          <i class="fas fa-plus mr-1"></i> Add Location
        </button>
        <button class="px-4 py-2 bg-teal-500 dark:bg-teal-400 text-white rounded-md text-sm font-semibold hover:bg-teal-600 dark:hover:bg-teal-500 transition duration-300">
          <i class="fas fa-filter mr-1"></i> Filter
        </button>
      </div>
    </div>

    <!-- Main Content Area - Map and Sidebar -->
    <div class="flex flex-col lg:flex-row">

      <!-- Map Section (Placeholder for actual map) -->
      <div class="relative flex-1 h-80 sm:h-96 lg:h-[600px] bg-gray-300 dark:bg-gray-950 flex items-center justify-center overflow-hidden border-b lg:border-b-0 lg:border-r border-gray-200 dark:border-gray-700">
        <img src="https://picsum.photos/1000/700?random=1" alt="Industrial Map" class="absolute inset-0 w-full h-full object-cover opacity-80">
        <div class="absolute inset-0 bg-gradient-to-br from-fuchsia-800/60 via-indigo-800/60 to-cyan-800/60 dark:from-fuchsia-900/70 dark:via-indigo-900/70 dark:to-cyan-900/70"></div>
        <div class="relative z-10 p-4 text-center">
          <p class="text-white text-3xl sm:text-4xl font-bold drop-shadow-lg">Map View Placeholder</p>
          <p class="text-white text-lg mt-2 opacity-90">Interactive map integration goes here.</p>
        </div>
        <!-- Map Controls Placeholder -->
        <div class="absolute bottom-4 right-4 z-20 flex flex-col space-y-2">
          <button class="p-3 bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full shadow-md hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"><i class="fas fa-plus"></i></button>
          <button class="p-3 bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full shadow-md hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"><i class="fas fa-minus"></i></button>
          <button class="p-3 bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full shadow-md hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"><i class="fas fa-location-arrow"></i></button>
        </div>

        <!-- Map Overlay Markers Placeholder -->
        <div class="hidden sm:block absolute top-1/3 left-1/4 -translate-x-1/2 -translate-y-1/2 bg-yellow-400 dark:bg-yellow-300 p-2 rounded-full shadow-lg text-xs font-bold text-gray-900 ring-4 ring-yellow-200 animate-pulse cursor-pointer hover:scale-110 transition"><i class="fas fa-warehouse mr-1"></i> Site A</div>
        <div class="absolute top-2/3 right-1/4 -translate-x-1/2 -translate-y-1/2 bg-red-500 dark:bg-red-400 p-2 rounded-full shadow-lg text-xs font-bold text-white ring-4 ring-red-200 animate-pulse cursor-pointer hover:scale-110 transition"><i class="fas fa-exclamation-triangle mr-1"></i> Incident X</div>
        <div class="hidden sm:block absolute bottom-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-green-500 dark:bg-green-400 p-2 rounded-full shadow-lg text-xs font-bold text-white ring-4 ring-green-200 cursor-pointer hover:scale-110 transition"><i class="fas fa-truck mr-1"></i> Depot B</div>
      </div>

      <!-- Sidebar / Details Section -->
      <div class="lg:w-96 p-4 sm:p-6 bg-gray-50 dark:bg-gray-800 border-t lg:border-t-0 lg:border-l border-gray-200 dark:border-gray-700 overflow-y-auto max-h-[500px] lg:max-h-[600px]">

        <!-- Search and Filter -->
        <div class="mb-6">
          <label for="search-location" class="sr-only">Search Locations</label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <i class="fas fa-search text-gray-400 dark:text-gray-500"></i>
            </div>
            <input type="text" id="search-location" class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md leading-5 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-fuchsia-500 dark:focus:ring-fuchsia-400 focus:border-transparent sm:text-sm" placeholder="Search locations...">
          </div>
        </div>

        <!-- Location List -->
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 border-b border-gray-200 dark:border-gray-600 pb-2">Active Sites</h3>

        <ul class="space-y-4">
          <!-- Location Item 1 -->
          <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md hover:shadow-lg dark:hover:shadow-fuchsia-900/50 transition-all duration-300 border-l-4 border-yellow-500 dark:border-yellow-400 cursor-pointer">
            <div class="flex items-center justify-between mb-2">
              <h4 class="font-bold text-gray-900 dark:text-white text-base"><i class="fas fa-warehouse mr-2 text-yellow-500 dark:text-yellow-400"></i>Warehouse Alpha</h4>
              <span class="text-xs font-medium text-green-600 dark:text-green-400 bg-green-100 dark:bg-green-800 px-2 py-1 rounded-full">Active</span>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-300">123 Industrial Rd, Metropolis, CA<br>Employees: 45 | Status: Operational</p>
            <div class="mt-3 flex justify-between items-center">
              <a href="#" class="text-fuchsia-600 dark:text-fuchsia-400 hover:underline text-sm">View Details</a>
              <span class="text-xs text-gray-500 dark:text-gray-400">Last Updated: 10m ago</span>
            </div>
          </li>

          <!-- Location Item 2 -->
          <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md hover:shadow-lg dark:hover:shadow-fuchsia-900/50 transition-all duration-300 border-l-4 border-red-500 dark:border-red-400 cursor-pointer">
            <div class="flex items-center justify-between mb-2">
              <h4 class="font-bold text-gray-900 dark:text-white text-base"><i class="fas fa-flask mr-2 text-red-500 dark:text-red-400"></i>Chemical Plant Gamma</h4>
              <span class="text-xs font-medium text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-800 px-2 py-1 rounded-full">Alert</span>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-300">456 Toxic Ave, Gotham, NY<br>Employees: 60 | Status: Maintenance Required</p>
            <div class="mt-3 flex justify-between items-center">
              <a href="#" class="text-fuchsia-600 dark:text-fuchsia-400 hover:underline text-sm">View Details</a>
              <span class="text-xs text-gray-500 dark:text-gray-400">Last Updated: 2m ago</span>
            </div>
          </li>

          <!-- Location Item 3 -->
          <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md hover:shadow-lg dark:hover:shadow-fuchsia-900/50 transition-all duration-300 border-l-4 border-blue-500 dark:border-blue-400 cursor-pointer">
            <div class="flex items-center justify-between mb-2">
              <h4 class="font-bold text-gray-900 dark:text-white text-base"><i class="fas fa-building mr-2 text-blue-500 dark:text-blue-400"></i>HQ Office Delta</h4>
              <span class="text-xs font-medium text-indigo-600 dark:text-indigo-400 bg-indigo-100 dark:bg-indigo-800 px-2 py-1 rounded-full">Online</span>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-300">789 Enterprise Blvd, Star City, CA<br>Employees: 120 | Status: Fully Staffed</p>
            <div class="mt-3 flex justify-between items-center">
              <a href="#" class="text-fuchsia-600 dark:text-fuchsia-400 hover:underline text-sm">View Details</a>
              <span class="text-xs text-gray-500 dark:text-gray-400">Last Updated: 30m ago</span>
            </div>
          </li>

          <!-- Location Item 4 -->
          <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md hover:shadow-lg dark:hover:shadow-fuchsia-900/50 transition-all duration-300 border-l-4 border-green-500 dark:border-green-400 cursor-pointer">
            <div class="flex items-center justify-between mb-2">
              <h4 class="font-bold text-gray-900 dark:text-white text-base"><i class="fas fa-truck-moving mr-2 text-green-500 dark:text-green-400"></i>Logistics Hub Zeta</h4>
              <span class="text-xs font-medium text-green-600 dark:text-green-400 bg-green-100 dark:bg-green-800 px-2 py-1 rounded-full">Active</span>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-300">101 Transit Way, Central City, FL<br>Employees: 75 | Status: High Traffic</p>
            <div class="mt-3 flex justify-between items-center">
              <a href="#" class="text-fuchsia-600 dark:text-fuchsia-400 hover:underline text-sm">View Details</a>
              <span class="text-xs text-gray-500 dark:text-gray-400">Last Updated: 15m ago</span>
            </div>
          </li>
        </ul>
        <!-- End Location List -->
      </div>
      <!-- End Sidebar -->

    </div>
    <!-- End Main Content Area -->

  </div>
  <!-- End Component Container -->

</div>

<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

Neon_Glow_Maps_Component

네온/글로우 효과가 있는 간단하고 반응이 빠른 지도 구성 요소로, 사진 포트폴리오를 위해 설계되었습니다. 멋진 무채색, 다크 모드 지원, 플레이스홀더 맵 이미지가 특징입니다.

열다 미리 보기

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-gray-100 to-white dark:from-gray-950 dark:to-gray-900 overflow-hidden relative">
  <div class="max-w-7xl mx-auto rounded-xl shadow-2xl relative overflow-hidden ring-4 ring-offset-4 ring-offset-gray-100 dark:ring-offset-gray-950 ring-indigo-300 dark:ring-indigo-600 group">
    
    <!-- Glow Effect 1 -->
    <div class="absolute -top-1/4 -left-1/4 w-1/2 h-1/2 bg-blue-400 dark:bg-blue-600 rounded-full mix-blend-multiply filter blur-2xl opacity-10 animate-blob g:animate-blob-slow transform group-hover:scale-125 transition-transform duration-500"></div>
    <!-- Glow Effect 2 -->
    <div class="absolute -bottom-1/4 -right-1/4 w-1/2 h-1/2 bg-purple-400 dark:bg-purple-600 rounded-full mix-blend-multiply filter blur-2xl opacity-10 animate-blob animation-delay-2000 transform group-hover:scale-125 transition-transform duration-500"></div>

    <div class="relative z-10 p-4 sm:p-6 lg:p-8 bg-white dark:bg-gray-800 bg-opacity-80 dark:bg-opacity-80 backdrop-filter backdrop-blur-sm rounded-xl border border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-center text-gray-900 dark:text-gray-100 mb-4 sm:mb-6 leading-tight tracking-wider">
        <span class="relative inline-block">
          Find Our Locations
          <span class="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-blue-400 to-purple-400 dark:from-blue-600 dark:to-purple-600 rounded-full animate-pulse-light"></span>
        </span>
      </h2>

      <div class="aspect-w-16 aspect-h-9 w-full overflow-hidden rounded-lg shadow-lg relative group">
        <img src="https://picsum.photos/id/1043/1200/675" alt="Map of photography studio locations" class="object-cover w-full h-full rounded-lg transition-transform duration-500 group-hover:scale-105 filter group-hover:brightness-110">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent opacity-0 group-hover:opacity-60 transition-opacity duration-300 rounded-lg"></div>
        <div class="absolute bottom-4 left-4 right-4 text-white p-2 text-sm text-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
          <p class="font-semibold drop-shadow-lg">Explore our inspiring photoshoot locations around the globe.</p>
        </div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 mt-6">
        <div class="p-4 sm:p-5 rounded-lg bg-gray-50 dark:bg-gray-850 border border-gray-200 dark:border-gray-700 shadow-md group-hover:scale-[1.02] transition-transform duration-300">
          <p class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2"><span class="neon-text-blue">Studio Alpha</span></p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">123 Artistry Lane, Creative City, CA 90210</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">(555) 123-4567</p>
        </div>
        <div class="p-4 sm:p-5 rounded-lg bg-gray-50 dark:bg-gray-850 border border-gray-200 dark:border-gray-700 shadow-md group-hover:scale-[1.02] transition-transform duration-300">
          <p class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2"><span class="neon-text-purple">Gallery Echo</span></p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">789 Visionary Blvd, Lens Landing, NY 10001</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">(555) 987-6543</p>
        </div>
      </div>

      <div class="flex justify-center mt-8">
        <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full text-white bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900 focus:ring-blue-500 dark:focus:ring-purple-500 shadow-lg transform transition-all duration-300 ease-in-out hover:scale-105 active:scale-95 group relative overflow-hidden">
          <span class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <span class="relative z-10">Explore More Locations</span>
          <svg class="ml-2 -mr-1 w-5 h-5 relative z-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </a>
      </div>

    </div>
  </div>

  <!-- Custom CSS for glow and blob animations -->
  <style>
    @keyframes blob {
      0% { transform: translate(0px, 0px) scale(1); }
      33% { transform: translate(30px, -50px) scale(1.1); }
      66% { transform: translate(-20px, 20px) scale(0.9); }
      100% { transform: translate(0px, 0px) scale(1); }
    }
    .animate-blob { animation: blob 7s infinite; }
    .animate-blob-slow { animation: blob 12s infinite; }
    .animation-delay-2000 { animation-delay: 2000ms; }
    .dark .animate-pulse-light { animation: pulse-light-dark 2s infinite ease-in-out alternate; }
    .animate-pulse-light { animation: pulse-light 2s infinite ease-in-out alternate; }
    
    @keyframes pulse-light {
        0% { transform: scaleX(0); opacity: 0.2; }
        50% { transform: scaleX(1); opacity: 0.8; }
        100% { transform: scaleX(0); opacity: 0.2; }
    }
    @keyframes pulse-light-dark {
        0% { transform: scaleX(0); opacity: 0.3; }
        50% { transform: scaleX(1); opacity: 0.9; }
        100% { transform: scaleX(0); opacity: 0.3; }
    }
    .neon-text-blue {
      text-shadow: 0 0 5px #a7f3d0, 0 0 10px #67e8f9, 0 0 15px #38b2ac, 0 0 20px #06b6d4, 0 0 25px #0ea5e9;
      color: #7dd3fc;
    }
    .dark .neon-text-blue {
      text-shadow: 0 0 5px #7dd3fc, 0 0 10px #38b2ac, 0 0 15px #0ea5e9, 0 0 20px #06b6d4, 0 0 25px #3b82f6; /* Darker blue glow */
      color: #93c5fd;
    }
    .neon-text-purple {
      text-shadow: 0 0 5px #f0abfc, 0 0 10px #e879f9, 0 0 15px #d946ef, 0 0 20px #c026d3, 0 0 25px #a855f7;
      color: #e879f9;
    }
    .dark .neon-text-purple {
      text-shadow: 0 0 5px #a78bfa, 0 0 10px #c026d3, 0 0 15px #a855f7, 0 0 20px #9333ea, 0 0 25px #8b5cf6; /* Darker purple glow */
      color: #d8b4fe;
    }
  </style>
</div>

Maps 컴포넌트

머티리얼 디자인(Material Design) 미학과 흙색 배합이 있는 단순하고 반응이 빠른 지도 구성 요소로, 다크 모드를 지원합니다. 위치 기반 콘텐츠를 재미있게 보여주는 엔터테인먼트/미디어 플랫폼에 적합합니다.

열다 미리 보기

                <div class="p-4 md:p-8 lg:p-12 bg-stone-100 dark:bg-stone-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl rounded-2xl shadow-xl dark:shadow-2xl overflow-hidden bg-white dark:bg-stone-800 transition-colors duration-300 ease-in-out">
    <!-- Map Header -->
    <div class="relative h-48 sm:h-64 md:h-80 bg-gradient-to-br from-stone-500 to-stone-700 dark:from-stone-700 dark:to-stone-900 overflow-hidden flex items-center justify-center p-4">
      <img src="https://picsum.photos/1000/600?grayscale&blur=5" alt="Abstract Map Background" class="absolute inset-0 w-full h-full object-cover opacity-30">
      <div class="relative z-10 text-center">
        <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-white mb-2">Explore New Horizons</h2>
        <p class="text-stone-200 text-sm sm:text-base">Discover captivating places, near and far.</p>
      </div>
      <button class="absolute top-4 right-4 bg-white/20 hover:bg-white/30 text-white rounded-full p-2 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 transition-colors duration-200">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
      </button>
    </div>

    <!-- Map Content Area -->
    <div class="p-4 sm:p-6 lg:p-8">
      <div class="mb-6">
        <h3 class="text-xl sm:text-2xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Popular Destinations</h3>
        <p class="text-stone-600 dark:text-stone-300 text-sm">Hand-picked locations entertainment enthusiasts love.</p>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
        <!-- Location Card 1 -->
        <div class="bg-stone-50 dark:bg-stone-700 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden">
          <img src="https://picsum.photos/300/200?random=1" alt="Placeholder Image for Location 1" class="w-full h-32 object-cover">
          <div class="p-3">
            <h4 class="text-lg font-medium text-stone-800 dark:text-stone-100 mb-1">Mystic Lake</h4>
            <p class="text-sm text-stone-500 dark:text-stone-400">A serene spot for nature documentaries.</p>
            <a href="#" class="mt-2 inline-block text-amber-600 dark:text-amber-400 hover:underline text-sm font-medium">View Map</a>
          </div>
        </div>

        <!-- Location Card 2 -->
        <div class="bg-stone-50 dark:bg-stone-700 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden">
          <img src="https://picsum.photos/300/200?random=2" alt="Placeholder Image for Location 2" class="w-full h-32 object-cover">
          <div class="p-3">
            <h4 class="text-lg font-medium text-stone-800 dark:text-stone-100 mb-1">Ancient Ruins</h4>
            <p class="text-sm text-stone-500 dark:text-stone-400">Ideal for historical drama series.</p>
            <a href="#" class="mt-2 inline-block text-amber-600 dark:text-amber-400 hover:underline text-sm font-medium">View Map</a>
          </div>
        </div>
      </div>

      <!-- Call to Action / Footer -->
      <div class="mt-8 pt-6 border-t border-stone-200 dark:border-stone-600 text-center">
        <p class="text-stone-600 dark:text-stone-300 text-sm mb-4">Can't find what you're looking for?</p>
        <button class="px-6 py-3 bg-amber-600 hover:bg-amber-700 text-white font-medium rounded-full shadow-md hover:shadow-lg transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-stone-800">
          Suggest a New Place
        </button>
      </div>
    </div>
  </div>
</div>

Paper_Print_Sepia_Sports_Map_Component

스포츠/피트니스 애플리케이션을 위한 반응형 지도와 같은 구성 요소로, 종이/인쇄에서 영감을 받은 디자인과 세피아/갈색 색 구성표가 있습니다. 여기에는 시뮬레이션된 지도 영역, 위치 핀 및 범례가 포함되며 완전한 다크 모드가 지원됩니다.

열다 미리 보기

                <div class="font-sans antialiased text-gray-800 bg-amber-50 dark:bg-stone-900 dark:text-stone-100 p-4 sm:p-6 md:p-8 min-h-screen">

  <div class="max-w-6xl mx-auto bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden
              border border-stone-200 dark:border-stone-700
              transform transition-all duration-300 hover:shadow-2xl">

    <!-- Header Section -->
    <div class="bg-stone-100 dark:bg-stone-700 p-4 sm:p-5 flex items-center justify-between
                border-b border-stone-200 dark:border-stone-600
                relative overflow-hidden">
      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/epoxy-dark.png')] opacity-20 dark:opacity-5"></div>
      <h2 class="text-xl sm:text-2xl font-serif text-stone-800 dark:text-stone-200
                 relative z-10 font-bold tracking-wide">Training Ground Map</h2>
      <button aria-label="View Settings" class="relative z-10 p-2 rounded-full bg-stone-200 dark:bg-stone-600
                         hover:bg-stone-300 dark:hover:bg-stone-500 transition-colors duration-200
                         shadow-sm dark:shadow-md">
        <svg class="w-5 h-5 text-stone-600 dark:text-stone-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M11.49 3.17c-.389-.111-.796-.16-1.21-.16s-.822.049-1.21.16zM9.54 2.1c.427-.122.875-.18 1.35-.18s.923.058 1.35.18l.8-.8a.75.75 0 011.06 0l1.25 1.25a.75.75 0 010 1.06l-.775.775a.75.75 0 00-.012.012c.11.23.2.47.27.708l.775.776a.75.75 0 010 1.06l-1.25 1.25a.75.75 0 01-1.06 0l-.775-.775a.75.75 0 00-.01-.01c-.24.11-.49.2-.748.27l-.776.775a.75.75 0 01-1.06 0l-1.25-1.25a.75.75 0 010-1.06l.775-.775a.75.75 0 00.01-.012c-.11-.23-.2-.47-.27-.708l-.775-.776a.75.75 0 010-1.06l1.25-1.25a.75.75 0 011.06 0l.775.775a.75.75 0 00.012.01z" clip-rule="evenodd" />
          <path fill-rule="evenodd" d="M7.22 8.35s.893-.33 1.948-.33c1.055 0 1.948.33 1.948.33s.893.33 1.948-.33a.75.75 0 000-1.35s-.893-.33-1.948-.33c-1.055 0-1.948.33-1.948.33s-.893.33-1.948-.33a.75.75 0 000 1.35zM7.22 13.65s.893-.33 1.948-.33c1.055 0 1.948.33 1.948.33s.893.33 1.948-.33a.75.75 0 000-1.35s-.893-.33-1.948-.33c-1.055 0-1.948.33-1.948.33s-.893.33-1.948-.33a.75.75 0 000 1.35zM7.22 18.95s.893-.33 1.948-.33c1.055 0 1.948.33 1.948.33s.893.33 1.948-.33a.75.75 0 000-1.35s-.893-.33-1.948-.33c-1.055 0-1.948.33-1.948.33s-.893.33-1.948-.33a.75.75 0 000 1.35z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-0">

      <!-- Left Sidebar: Map Controls & Legend -->
      <div class="md:col-span-1 p-4 sm:p-5 bg-stone-50 dark:bg-stone-700
                  border-r-0 md:border-r border-b md:border-b-0 border-stone-200 dark:border-stone-600
                  relative overflow-hidden">
        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/paper-fibers.png')] opacity-40 dark:opacity-5"></div>

        <div class="relative z-10 space-y-6">

          <!-- Map Controls -->
          <div>
            <h3 class="text-lg font-bold font-serif mb-3 text-stone-700 dark:text-stone-200">Map Controls</h3>
            <div class="space-y-3">
              <button class="w-full flex items-center justify-center p-2 rounded-md bg-amber-100 dark:bg-stone-600 text-amber-800 dark:text-stone-200
                             shadow-sm hover:shadow-md transition-all duration-200
                             border border-amber-200 dark:border-stone-500
                             hover:bg-amber-200 dark:hover:bg-stone-500">
                <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h2.5V7a.5.5 0 011 0v2.5h2.5a.5.5 0 010 1H9.5v2.5a.5.5 0 01-1 0V10.5H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12z" clip-rule="evenodd"></path></svg>
                Zoom In
              </button>
              <button class="w-full flex items-center justify-center p-2 rounded-md bg-amber-100 dark:bg-stone-600 text-amber-800 dark:text-stone-200
                             shadow-sm hover:shadow-md transition-all duration-200
                             border border-amber-200 dark:border-stone-500
                             hover:bg-amber-200 dark:hover:bg-stone-500">
                <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.5 10.5a.5.5 0 01-.5-.5h2.5V7a.5.5 0 011 0v2.5h2.5a.5.5 0 010 1H9.5v2.5a.5.5 0 01-1 0V10.5H7z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12z" clip-rule="evenodd"></path></svg>
                Zoom Out
              </button>
              <button class="w-full flex items-center justify-center p-2 rounded-md bg-amber-100 dark:bg-stone-600 text-amber-800 dark:text-stone-200
                             shadow-sm hover:shadow-md transition-all duration-200
                             border border-amber-200 dark:border-stone-500
                             hover:bg-amber-200 dark:hover:bg-stone-500">
                <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zm-5 8a.8.8 0 01.8-.8h8.4a.8.8 0 010 1.6H5.8A.8.8 0 015 10z"></path></svg>
                Recenter
              </button>
            </div>
          </div>

          <!-- Legend -->
          <div>
            <h3 class="text-lg font-bold font-serif mb-3 text-stone-700 dark:text-stone-200">Legend</h3>
            <ul class="space-y-2 text-sm text-stone-700 dark:text-stone-300">
              <li class="flex items-center"><span class="w-4 h-4 mr-2 rounded-full bg-red-500 dark:bg-red-600 shadow-sm"></span> Training Field</li>
              <li class="flex items-center"><span class="w-4 h-4 mr-2 rounded-full bg-blue-500 dark:bg-blue-600 shadow-sm"></span> Water Station</li>
              <li class="flex items-center"><span class="w-4 h-4 mr-2 rounded-full bg-emerald-500 dark:bg-emerald-600 shadow-sm"></span> First Aid</li>
              <li class="flex items-center"><span class="w-4 h-4 mr-2 rounded-full bg-purple-500 dark:bg-purple-600 shadow-sm"></span> Rest Area</li>
            </ul>
          </div>

          <!-- Quick Stats (Example) -->
          <div>
            <h3 class="text-lg font-bold font-serif mb-3 text-stone-700 dark:text-stone-200">Workout Overview</h3>
            <div class="space-y-2 text-stone-700 dark:text-stone-300">
              <p class="flex justify-between"><span>Total Distance:</span> <span class="font-semibold">5.2 km</span></p>
              <p class="flex justify-between"><span>Elevation Gain:</span> <span class="font-semibold">120 m</span></p>
              <p class="flex justify-between"><span>Avg Pace:</span> <span class="font-semibold">5:15 /km</span></p>
            </div>
          </div>

        </div>
      </div>

      <!-- Main Map Area -->
      <div class="md:col-span-2 lg:col-span-3 bg-amber-100 dark:bg-stone-900 min-h-[400px] md:min-h-[600px] lg:min-h-[700px]
                  flex items-center justify-center relative shadow-inner p-4 sm:p-6
                  border-l-0 md:border-l border-stone-200 dark:border-stone-700">
        <img src="https://picsum.photos/1200/800?grayscale&blur=2" alt="Placeholder map of training grounds" 
             class="absolute inset-0 w-full h-full object-cover opacity-50 dark:opacity-30 mix-blend-multiply dark:mix-blend-screen
             transform scale-105 filter sepia dark:invert dark:sepia-0 dark:contrast-125 dark:brightness-75">
        
        <div class="relative z-10 w-full h-full flex flex-col justify-center items-center p-4">
          <h2 class="text-2xl sm:text-3xl lg:text-4xl font-serif text-stone-800 dark:text-stone-200 font-bold mb-6 text-center
                     drop-shadow-lg text-shadow-sm filter backdrop-blur-sm bg-white/20 dark:bg-stone-900/20 p-3 rounded-xl
                     border border-stone-300 dark:border-stone-600 
                     "><span class="hidden sm:inline">Interactive </span>Training Map</h2>

          <!-- Simulated Map Pins -->
          <div class="absolute top-1/4 left-1/4 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center group cursor-pointer">
            <div class="w-6 h-6 rounded-full bg-red-500 dark:bg-red-600 border-2 border-white dark:border-stone-800 shadow-md animate-bounce-short group-hover:scale-125 transition-transform duration-200"></div>
            <div class="w-0 h-0 border-l-4 border-r-4 border-t-8 border-transparent border-t-red-500 dark:border-t-red-600"></div>
            <span class="absolute top-full mt-2 bg-stone-700 dark:bg-stone-900 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">Field A (Football)</span>
          </div>
          <div class="absolute top-2/3 right-1/4 transform translate-x-1/2 translate-y-1/2 flex flex-col items-center group cursor-pointer">
            <div class="w-6 h-6 rounded-full bg-blue-500 dark:bg-blue-600 border-2 border-white dark:border-stone-800 shadow-md animate-bounce-short group-hover:scale-125 transition-transform duration-200"></div>
            <div class="w-0 h-0 border-l-4 border-r-4 border-t-8 border-transparent border-t-blue-500 dark:border-t-blue-600"></div>
            <span class="absolute top-full mt-2 bg-stone-700 dark:bg-stone-900 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">Water Station 1</span>
          </div>
          <div class="absolute top-1/2 right-1/2 transform translate-x-1/2 -translate-y-1/2 flex flex-col items-center group cursor-pointer">
            <div class="w-6 h-6 rounded-full bg-emerald-500 dark:bg-emerald-600 border-2 border-white dark:border-stone-800 shadow-md animate-bounce-short group-hover:scale-125 transition-transform duration-200"></div>
            <div class="w-0 h-0 border-l-4 border-r-4 border-t-8 border-transparent border-t-emerald-500 dark:border-t-emerald-600"></div>
            <span class="absolute top-full mt-2 bg-stone-700 dark:bg-stone-900 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">Medical Tent</span>
          </div>

          <!-- Call to Action / Info Box -->
          <div class="absolute bottom-8 right-8 bg-white dark:bg-stone-700 rounded-lg p-3 sm:p-4 shadow-lg
                      border border-stone-200 dark:border-stone-600 max-w-xs text-sm
                      transform translate-y-0 hover:-translate-y-1 transition-transform duration-300
                      hidden sm:block">
            <div class="dark:text-stone-300 text-stone-700">
              <p class="font-bold font-serif mb-2 text-base text-stone-800 dark:text-stone-200">Ready to Explore?</p>
              <p>Click on the pins for more details about different areas. Track your progress here!</p>
              <button class="mt-3 w-full bg-amber-700 dark:bg-amber-600 text-white py-2 rounded-md
                             hover:bg-amber-800 dark:hover:bg-amber-500 transition-colors duration-200
                             shadow-md dark:shadow-lg">Start Tracking</button>
            </div>
          </div>
        </div>
      </div>

    </div>

    <!-- Footer (simple for this component) -->
    <div class="bg-stone-100 dark:bg-stone-700 p-3 sm:p-4 text-center
                border-t border-stone-200 dark:border-stone-600
                relative overflow-hidden">
      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/epoxy-dark.png')] opacity-20 dark:opacity-5"></div>
      <p class="text-xs text-stone-600 dark:text-stone-400 relative z-10">Data provided by GeoFit Innovations &copy; 2023</p>
    </div>

  </div>
</div>

<style>
  @import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Open+Sans:wght@400;600&display=swap');
  .font-sans { font-family: 'Open Sans', sans-serif; }
  .font-serif { font-family: 'Merriweather', serif; }

  /* Custom keyframes for ping animation */
  @keyframes bounce-short {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }
  .animate-bounce-short {
    animation: bounce-short 1.5s infinite;
  }
</style>