JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div class="col" id="left_col">
        <div class="gamepart" id="preview_block"></div>
        <div class="gamepart" id="fairy_gauge"></div>
    </div>
    <div class="col" id="mid_col">
        <div class="gamepart" id="game_board"></div>
    </div>
    <div class="col" id="right_col">
        <div class="gamepart" id="score"></div>
        <div class="gamepart" id="level"></div>
    </div>
</div>

CSS

.col{
    border-color: blue;
    border-width: 1px;
    border-style: solid;
    background-color:lightblue;
}
.gamepart{
    border-color: black;
    border-width: 1px;
    border-style: solid;
}
#left_col{
    float:left;
    width:130px;
    height:480px;
}
#mid_col{
  float:left;
  width:270px;
  height:480px;
}
#game_board{
  margin-left: auto;
  margin-right: auto;    
  width:192px;
  height:480px;
  background-color:darkgray;
}
#preview_block{
  margin-left: auto;
  margin-right: auto;    
  width:80px;
  height:80px;
  background-color:darkgray;
}
#fairy_gauge{
  margin-left: auto;
  margin-right: auto;    
    width:80px;
    height:150px;
    background-color:darkgray;
}
#right_col{
    float:left;
    width:220px;
    height:480px;
}
#score{
  margin-left: auto;
  margin-right: auto;    
    width:180px;
    height:100px;
    background-color:darkgray;
}
#level{
  margin-left: auto;
  margin-right: auto;    
    width:180px;
    height:100px;
    background-color:darkgray;
}