JSFiddle - React, Tailwind, and code Playground

HTML

<div class="chessboard">
  <input type="radio" name="tag" id="a1">
  <label class="white a1" for="a1"></label>
  <input type="radio" name="tag" id="b1">
  <label class="black b1" for="b1"></label>
  <input type="radio" name="tag" id="c1">
  <label class="white c1" for="c1"></label>
  <input type="radio" name="tag" id="d1">
  <label class="black d1" for="d1"></label>
  <input type="radio" name="tag" id="e1">
  <label class="white e1" for="e1"></label>
  <input type="radio" name="tag" id="f1">
  <label class="black f1" for="f1"></label>
  <input type="radio" name="tag" id="g1">
  <label class="white g1" for="g1"></label>
  <input type="radio" name="tag" id="h1">
  <label class="black h1" for="h1"></label>

  <input type="radio" name="tag" id="a2">
  <label class="black a2" for="a2"></label>
  <input type="radio" name="tag" id="b2">
  <label class="white b2" for="b2"></label>
  <input type="radio" name="tag" id="c2">
  <label class="black c2" for="c2"></label>
  <input type="radio" name="tag" id="d2">
  <label class="white d2" for="d2"></label>
  <input type="radio" name="tag" id="e2">
  <label class="black e2" for="e2"></label>
  <input type="radio" name="tag" id="f2">
  <label class="white f2" for="f2"></label>
  <input type="radio" name="tag" id="g2">
  <label class="black g2" for="g2"></label>
  <input type="radio" name="tag" id="h2">
  <label class="white h2" for="h2"></label>

  <input type="radio" name="tag" id="a3">
  <label class="white a3" for="a3"></label>
  <input type="radio" name="tag" id="b3">
  <label class="black b3" for="b3"></label>
  <input type="radio" name="tag" id="c3">
  <label class="white c3" for="c3"></label>
  <input type="radio" name="tag" id="d3">
  <label class="black d3" for="d3"></label>
  <input type="radio" name="tag" id="e3">
  <label class="white e3" for="e3"></label>
  <input type="radio" name="tag" id="f3">
  <label class="black f3" for="f3"></label>
  <input type="radio" name="tag" id="g3">
  <label class="white g3"...

CSS

.white {
  background: #f4cd8d;
}

.black {
  background: #746864;
}

body {
  margin: 0;
}

.chessboard {
  display: inline-grid;
  grid-template-columns: repeat(8, 30px);
  position: relative;
  overflow: hidden;
}

input {
  display: none;
}

label {
  width: 30px;
  height: 30px;
  background: #f4cd8d;
  display: block;
}

.chessboard__move-scheme {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
  opacity: 0;
  width: 30px;
  height: 30px;
  background: #333;
}

input[type="radio"]:checked+label {
  background: #FF0000;
  position: relative;
}

input[type="radio"]:checked+label::before {
  content: '';
  display: block;
  position: absolute;
  top: -200%;
  right: -200%;
  bottom: -200%;
  left: -200%;
  box-shadow: inset 0 0 0 10px blue;
  pointer-events: none;
}