JSFiddle - React, Tailwind, and code Playground

by Vipin Patil

HTML

<div class="main1">

<div class="m1" id="1"> 1  </div>
<div class="m1" id="2"> 2  </div>
<div class="m1" id="3"> 3  </div>
<div class="m1" id="4">  4 </div>
<div class="m1" id="5">  5 </div>
</div>


<div class="main2">

<div class="m1" id="1"> 1  </div>
<div class="m1" id="2"> 2  </div>
<div class="m1" id="3"> 3  </div>
<div class="m1" id="4">  4 </div>
<div class="m1" id="5">  5 </div>
</div>

CSS

.main {
  width: 75%;
  /*float: left;*/
  padding: 15px;
  border: 1px solid red;
}
.m1{
width:12%;
height:12%;
  float: left;
 padding: 15px;

  border: 1px solid blue;
}

.m1::before{ content: "Player Name";}