Search Components

Maps

Interactive geographical maps

Playful Maps Component for Gaming

A simple, playful, and responsive map component suitable for gaming websites, featuring bright jewel tones, rounded elements, and dark mode support.

Open Preview

                <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

A complex 3D-inspired maps component with a neon/electric color scheme, suitable for a portfolio to showcase locations or projects. It features glowing elements, rich interactive-like UI, and full responsiveness with dark mode support.

Open Preview

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

A responsive map-like component designed for educational platforms, featuring interactive elements and soft pastel colors with dark mode support. Focuses on microinteractions like subtle hovers and active states.

Open Preview

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

LuxuryFoodMapsComponent

An elegant and responsive food/restaurant map component with a candy-themed color scheme, suitable for desktop, tablet, and mobile, including dark mode support. Features a prominent map area and a list of premium restaurant locations.

Open Preview

                <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

A complex, responsive 'Memphis Design' inspired maps component for cryptocurrency/blockchain applications, featuring bold colors, geometric shapes, and a warm sunset color scheme. Includes dark mode support and interactive elements.

Open Preview

                <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

A simple, brutalist-style map component for photography portfolios, featuring a bold purple color scheme with high contrast and dark mode support.

Open Preview

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

IndustrialVibrantMapsComponent

A responsive and interactive map component with an industrial, raw aesthetic and vibrant color scheme, suitable for Technology/SaaS applications. Includes dark mode support.

Open Preview

                <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

A simple, responsive map component with a neon/glow effect, designed for photography portfolios. Features cool neutral colors, dark mode support, and placeholder map image.

Open Preview

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

A simple, responsive map component with a Material Design aesthetic and earth tone color scheme, featuring dark mode support. Suitable for entertainment/media platforms to show location-based content playfully.

Open Preview

                <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

A responsive map-like component for sports/fitness applications with a paper/print-inspired design and sepia/brown color scheme. It includes a simulated map area, location pins, and a legend, with full dark mode support.

Open Preview

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

Search Components

Categories

Maps