JSFiddle - React, Tailwind, and code Playground

by coktopus

HTML

<div class='container'>
<div class='square'>square</div>
<div class='square'>square</div>
<div class='square'>square</div>
<div class='square'>square</div>
<div class='square'>square</div>
<div class='square'>square</div>
<div class='square'>square</div>
<div class='square'>square</div>
<div class='square'>square</div>
<div class='square'>square</div>
<div class='square'>last</div>
</div>

CSS

.square {
  width: 50px;
  height: 50px;
  background-color: red;
  margin-top: 10px;
  margin-right: 50px;
  
}

.square:left-child {
  margin-right: 0px;
}

.container {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  flex-wrap: wrap;
  flex-direction: row
  
}