JSFiddle - React, Tailwind, and code Playground

by Wang Shuo

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <div class="wrapper">
    <main class="parent1">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </main>
    <main class="parent2">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </main>
    <main class="parent3">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </main>
  </div>
</body>
</html>

CSS

.wrapper{
  background-color: red;
  overflow: hidden;
  /* display:flex; */
}
*{
  margin: 0;
  padding: 0;
}
.parent1,.parent2,.parent3{
  /* flex-grow: 1; */
  flex-grow: 0;
  float: left;
}
.parent1{
  width: 33.3%;
  background: #333;
}
.parent2{
  width: 33.33%;
  background: #666;
}
.parent3{
  width: 33.33333333333333%;
  background: #000;
}
main>div{
  padding-bottom: 100%;
}