3D_Neon_Maps_Component

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