JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div class="outer">
  <div class="inner">
    <div class="item">thing 1</div>
    <div class="item">thing 2</div>
    <div class="item">thing 3</div>
    <div class="item">thing 4</div>
    <div class="item">thing 5</div>
    <div class="item">thing 6</div>
    <div class="item">thing 7</div>
    <div class="item">thing 8</div>
    <div class="item">thing 9</div>
    <div class="item">thing 10</div>
    <div class="item">thing 11</div>
    <div class="item">thing 12</div>
  </div>
</div>

CSS

.outer {
  background: #444444;
  
  margin: 3em auto;
  width: 22em;
}

.inner {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.5em;
  box-shadow: 0 0 0 2px limegreen;
}

.item {
  width: calc(33% - 1em);
  background: #9cc;
  height: 2em;
  margin: 0.4em 0.5em;
}