JSFiddle - React, Tailwind, and code Playground

by Ergün YILDIZ

HTML

<div id="container">

  <div class="boxHolder1 boxHolder">
    <div class="box1 box">1</div>
    <div class="box2 box">2</div>
    <div class="box3 box">3</div>
  </div>
  
  <div class="boxHolder2 boxHolder">
    <div class="box4 box">4</div>
    <div class="box5 box">5</div>
    <div class="box6 box">6</div>
  </div>
  
  <div class="boxHolder3 boxHolder">
    <div class="box7 box">7</div>
    <div class="box8 box">8</div>
    <div class="box9 box">9</div>
  </div>
  
  <div class="boxHolder4 boxHolder">
    <div class="box10 box">10</div>
    <div class="box11 box">11</div>
    <div class="box12 box">12</div>
  </div>
  
</div>

CSS

#container {
  width: 98%; float: left; height: 500px; margin: 1%; border: 1px solid #CCC;
}

.boxHolder{
  width:25%; float:left; height:400px; 
}


.box1 {
  height: 25%; background: #666;
}
.box2 {
  height: 50%; background: #AAA;
}
.box3 {
  height: 25%; background: #BBB;
}
.box4 {
  width:150%; height: 50%; background: #333;
}
.box5 {
  height: 25%; background: #EEE;
}
.box6 {
  height:25%; background: #CCC;
}
.box7 {
  margin-left:50%; width: 50%; height:25%; background: #CCC;
}
.box8 {
  margin-left:50%; width: 50%; height:25%; background: #CCC;
}
.box9 {
  width:125%; height:50%; background: #666; float:right;
}
.box10 {
  height:25%; background: #AAA;
}
.box11 {
  height:50%; background: #BBB;
}
.box12 {
  height:25%; background: #DDD;
}