JSFiddle - React, Tailwind, and code Playground

by cloudadida

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <div class="box box1">
      <div class="minibox"></div>
      <div class="minibox"></div>
    </div>
    <div class="box box2">box2</div>
    <div class="box box3">box3</div>
    <div class="box box4">box4</div>
    <div class="box box5">box5</div>
  </div>
</body>
</html>

CSS

.container{
  width: 300px;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
  }

.box{
  width: 100px;
  height: 100px;
}

.box1{
  background: tomato;
  display: flex;
  flex-wrap: wrap;
}

/*minibox*/
.minibox{
  width: 60px;
  height: 60px;
  background: white;
  border: 1px solid black;
}

.box2{
  background: lightgreen;
}

.box3{
  background: lavender;
}

.box4{
  background: lightpink;
}

.box5{
  background: lightblue;
}