JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<div ID="container">
  <div class="tableContent">
  <div class="playerNickname">Player1</div>
  <div class="statusTable">Status</div>
  </div>

  <div class="tableContent">
  <div class="playerNickname">Player2</div>
  <div class="statusTable">Status</div>
  </div>

  <div class="tableContent">
  <div class="playerNickname">Player3</div>
  <div class="statusTable">Status</div>
  </div>

  <div class="tableContent">
  <div class="playerNickname">Player4</div>
  <div class="statusTable">Status</div>
  </div>

  <div class="tableContent">
  <div class="playerNickname">Player5</div>
  <div class="statusTable">Status</div>
  </div>

  <div class="tableContent">
  <div class="playerNickname">Player6</div>
  <div class="statusTable">Status</div>
  </div>

  <div class="tableContent">
  <div class="playerNickname">Player7</div>
  <div class="statusTable">Status</div>
  </div>

  <div class="tableContent">
  <div class="playerNickname">Player8</div>
  <div class="statusTable">Status</div>
  </div>

  <div class="tableContent">
  <div class="playerNickname">Player9</div>
  <div class="statusTable">Status</div>
  </div>

  <div class="tableContent">
  <div class="playerNickname">Player10</div>
  <div class="statusTable">Status</div>
  </div>

<br><form>
<div align="center"><button id="button">Submit</button></div>
</form>

</div>

CSS

#container{
width: 550px;
background-color: #F5DEB3;
border: 1px solid #000000;
}

.playerNickname{
float: left;
width: 100px;
background-color: #FAFAD2;
border: 1px solid #000000;
}

.statusTable{
float: left;
width: 100px;
background-color: #FAFAD2;
border: 1px solid #000000;
}

.tableContent{
  width: 204px;
overflow: hidden;
margin: 0 auto;
}

#button{
margin: 0 auto;
width: auto;
background-color: #FFE4E1;
border: 1px solid #000000;
width: 500px;
height: 25px;
}