JSFiddle - React, Tailwind, and code Playground

by Amin Kodaganur

HTML

<div class="board">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

CSS

*{
  box-sizing : border-box;
}
.board{
  width : 600px;
  height : 300px;
  border : 1px solid #ccc;
}
.col{
  width : 33.33%;
  height : 100px;
  border : 1px solid #ccc;
  float : left;
}
.col:first-child{
  background-color: black; 
}
.col:nth-child(2n+3){
  background-color: black;
}