JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer" id="container">
  <div class='step' id=step0>
    <p class='child'> 1</p>
  </div>
  <div class='step' id=step1>
    <p class='child'> 2</p>
  </div>
  <div class='step' id=step2>
    <p class='child'>3</p>
  </div>
  <div class='step' id=step3>
    <p class='child'> 4</p>
  </div>
  <div class='step error' id=step7>
    <p class='child'>8</p>
  </div>
  <div class='step' id=step6>
    <p class='child'>7</p>
  </div>
  <div class='step' id=step5>
    <p class='child'>6</p>
  </div>
  <div class='step' id=step4>
    <p class='child'>5</p>
  </div>
  <div class='step' id=step8>
    <p class='child'>9</p>
  </div>
  <div class='step' id=step9>
    <p class='child'>10</p>
  </div>

CSS

.outer {
          display: flex;
          flex-wrap: wrap;
          margin: -5% -5% 0 -5%;
        }
        
        .step {
          text-align: center;
          display: inline-block;
          border: 2px solid black;
          margin: 5% 5% 0 5%;
          flex-grow: 1;
          height: 100px;
          width: 13%;
          overflow: auto;
        }
        
        .child {
          font-size: 1.25em;
        }