JSFiddle - React, Tailwind, and code Playground

HTML

<div id="score_board">
       <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>
          <div class="score" id="score_numbers"><p>4</p><p>3</p><p>2</p><p>1</p><p>0</p></div>
       </div>
    </div>
    <div id="enemy">
        <input type="radio" name="enemy_1"  id="enemy_1"  class="enemys">
        <input type="radio" name="enemy_2"  id="enemy_2"  class="enemys">
        <input type="radio" name="enemy_3"  id="enemy_3"  class="enemys">
        <input type="radio" name="enemy_4"  id="enemy_4"  class="enemys">
    </div>

CSS

#enemy{
    position: absolute;
    top: 250px;
    left: 22px;
    width:250px;
    height:60px;
}

.enemys{
    position:absolute;
    width:50px;
    height:50px;
    display:block;
    outline:1px solid #000;
}

.enemys#enemy_1 {left:0;}
.enemys#enemy_2 {left:52px;}
.enemys#enemy_3 {left:104px;}
.enemys#enemy_4 {left:156px;}


#score_board{
    position: absolute;
    top:160px;
    left:100px;
    width: 50px;
    height: 25px;
    border: 3px solid #060;
}


#score{
  position: absolute;
  top:-153px;
  width: 50px;
}

.score{
    outline:1px solid #009;    
    position:relative;
    display:block;
    width: 50px;
    height: 35px;
}
.score:checked{
    outline:1px solid #009;
    height:10px;
}

.score p {
    margin:0;
    padding:0;
    height: 25px;
    width:50px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    line-height: 25px;
}

#score_numbers{
    width: 50px;
    height: 125px;
    outline: 1px solid #ccc;
}