JSFiddle - React, Tailwind, and code Playground

by Oleh Kotsubko

HTML

<div class="wrapper">
  <div style="height: 20px; width: 40px"></div>
  <div style="height: 25px; width: 30px"></div>
  <div style="height: 40px; width: 40px"></div>
  <div style="height: 15px; width: 20px"></div>
  <div style="height: 20px; width: 40px"></div>
  <div style="height: 30px; width: 30px"></div>
  <div style="height: 20px; width: 20px"></div>
  <div style="height: 25px; width: 45px"></div>
  <div style="height: 50px; width: 60px"></div>
  <div style="height: 70px; width: 70px"></div>
</div>

CSS

.wrapper div {
  background-color: red;
  margin: 5px;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: top;
  flex-wrap: wrap;
  width: 300px;
 
}