Mini Map

<div class="nuda-minimap">
  <div class="nuda-minimap__grid"></div>
  <div class="nuda-minimap__viewport"></div>
  <span class="nuda-minimap__pin" style="left:40%;top:55%"></span>
  <span class="nuda-minimap__pin nuda-minimap__pin--alt" style="left:70%;top:30%"></span>
  <span class="nuda-minimap__pin nuda-minimap__pin--alt" style="left:25%;top:30%"></span>
  <span class="nuda-minimap__label">Madrid</span>
</div>

.nuda-minimap {
  position: relative;
  width: 100%;
  max-width: 200px;
  height: 120px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg,#0c0c10,#1a1a20);
  border: 1px solid rgba(255,255,255,.06);
}

.nuda-minimap__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(0deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size: 14px 14px;
}

.nuda-minimap__viewport {
  position: absolute;
  left: 30%;
  top: 35%;
  width: 50%;
  height: 40%;
  border: 1.5px dashed #e4ff54;
  border-radius: 6px;
  background: rgba(228,255,84,.05);
  animation: _mmZoom 3s ease-in-out infinite;
}

.nuda-minimap__pin {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e4ff54;
  box-shadow: 0 0 8px #e4ff54;
  transform: translate(-50%,-50%);
  z-index: 1;
}

.nuda-minimap__pin--alt {
  background: #62b6ff;
  box-shadow: 0 0 6px #62b6ff;
  width: 6px;
  height: 6px;
}

.nuda-minimap__label {
  position: absolute;
  left: 8px;
  top: 8px;
  color: #a0a0a8;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
}

@keyframes _mmZoom {
  0%,100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
    border-color: #fafafa;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-minimap__viewport {
    animation: none;
  }
}