JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left_wrapper" id="roll_nos">
	<div id="box" class="boxa">01</div>
  <div id="box" class="boxa">02</div>
  <div id="box" class="boxa">03</div>
  <div id="box" class="boxa">04</div>
  <div id="box" class="boxa">05</div>
  <div id="box" class="boxa">06</div>
  <div id="box" class="boxa">07</div>
  <div id="box" class="boxa">08</div>
  <div id="box" class="boxa">09</div>
  <div id="box" class="boxa">10</div>
  <div id="box" class="boxa">11</div>
  <div id="box" class="boxa">13</div>
  <div id="box" class="boxa">14</div>
  <div id="box" class="boxa">17</div>
  <div id="box" class="boxa">18</div>
  <div id="box" class="boxa">19</div>
  <div id="box" class="boxa">20</div>
  <div id="box" class="boxa">21</div>
  <div id="box" class="boxa">22</div>
  <div id="box" class="boxa">23</div>
  <div id="box" class="boxa">24</div>
  <div id="box" class="boxa">25</div>
  <div id="box" class="boxa">26</div>
  <div id="box" class="boxa">27</div>
  </div>

CSS

.left_wrapper		
{
max-width: 70%;
margin:0 auto;
float:left;
}


.boxa
{
background-color: #45e645;
display:inline;
position:relative;
left:4%;
float:left;
margin: 1% 1%;
padding:1%;
font-size: 85px;
text-align:center;
border:1px solid green;
-webkit-user-select: none; /* Chrome/Safari */        
-moz-user-select: none; /* Firefox */
cursor:pointer;

}