JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

HTML

<div id="score">
          <input type="radio" name="enemy_1" id="score_1" class="score" checked="">
          <input type="radio" name="enemy_2" id="score_2" class="score" checked="">
          <input type="radio" name="enemy_3" id="score_3" class="score" checked="">
          <input type="radio" name="enemy_4" id="score_4" class="score" checked="">
          <input type="radio" name="enemy_5" id="score_5" class="score" checked="">
          <input type="radio" name="enemy_6" id="score_6" class="score" checked="">
          <input type="radio" name="enemy_7" id="score_7" class="score" checked="">
          <input type="radio" name="enemy_8" id="score_8" class="score" checked="">
          <input type="radio" name="enemy_9" id="score_9" class="score" checked="">
          <input type="radio" name="enemy_10" id="score_10" class="score" checked="">
          <div class="score" id="score_11"></div>
</div>
<div>
    <input type="radio" name="enemy_1" id="target1">
    <input type="radio" name="enemy_2" id="target2">
</div>

CSS

#score {
position: absolute;
top: -630px;
right: 0;
width: 111px;
height: 693px;
}

.score {
position: relative;
display: block;
width: 111px;
height: 63px;
background-color: transparent;
-webkit-appearance: button;
-moz-appearance: button;
-webkit-transition: .1s all linear;
}
.score:checked {
position: absolute;
top: 0px;
height: 0px;
}

#score_11{
    background-image:...