<div id="popit" class="popit"></div>
body {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
}
.popit {
  align-items: center;
  box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25),
    -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
  border-radius: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.circle {
  display: inline-block;
  cursor: pointer;
  width: 14vw;
  height: 14vw;
  max-width: 80px;
  max-height: 80px;
  margin: 3px;
  border-radius: 50%;
  transition: 0.5s;
  box-shadow: inset 8px 8px 8px rgba(255, 255, 255, 0.3),
    inset -8px -8px 8px rgba(0, 0, 0, 0.25);
  /* Убираем выделение при нажатии с мобилки    */
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-tap-highlight-color: transparent;
}
.pressed {
  box-shadow: inset 8px 8px 8px rgba(0, 0, 0, 0.25),
    inset -8px -8px 8px rgba(255, 255, 255, 0.3);
}
.r {
  background-color: #f23c39;
}
.o {
  background-color: #fb8f17;
}
.y {
  background-color: #fcf620;
}
.g {
  background-color: #69d437;
}
.b {
  background-color: #3cc1f6;
}
.p {
  background-color: #bca3f6;
}
const colors = ["r", "o", "y", "g", "b", "p"];
const popit = document.getElementById("popit");

for (let color of colors) {
  const row = document.createElement("div");
  row.className = color;
  for (let i = 0; i < 5; i++) {
    const pop = document.createElement("div");
    pop.className = "circle " + color;
    row.appendChild(pop);
  }
  popit.appendChild(row);
}

const sound = new Audio(
  "https://freesound.org/data/previews/399/399934_1676145-lq.mp3"
);

popit.onclick = function (event) {
  const target = event.target;
  if (!target.matches(".circle")) {
    return;
  }

  sound.pause();
  sound.currentTime = 0;
  sound.play();
  if ("vibrate" in navigator) {
    navigator.vibrate(100);
  }
  target.classList.toggle("pressed");
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.