JSFiddle - React, Tailwind, and code Playground

HTML

<div class="floor">
  <div class="large ball zindex2" onclick="touch(this)">
    <div>
    ////
    </div>
  </div>
  <div class="small ball zindex1" onclick="touch(this)"></div>

</div>
<div id="log"></div>

CSS

.floor {
  background-color: #ddd;
  width:200px;
  height: 200px;
}
.floor .ball {
  border-radius: 50%;
  overflow: hidden;
  color: #ff0;
}

.ball.small {
  height:25px;
  width: 25px;
  background-color: #00f;
}
.ball.large {
  height:150px;
  width: 150px;
  background-color: #555;
}
.zindex1 {
  position:absolute;
  z-index:1;
}
.zindex2 {
  position:absolute;
  z-index: 2;
}

JavaScript

function log(str) {
  document.getElementById('log').innerHTML += '<br/>' + str;
}
function touch(ball) {
  log(ball.className + ' clicked')
}