JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row show-grid">
      <div class="col-md-2">1</div>
      <div class="col-md-2">2</div>
      <div class="col-md-2">3</div>
      <div class="col-md-2">4</div>
      <div class="col-md-2">5</div>
      <div class="col-md-2">6</div>
      <div class="col-md-2">7</div>
      <div class="col-md-2">8</div>
      <div class="col-md-2">9</div>
      <div class="col-md-2">11</div>
</div>

CSS

.col-md-2{
    float: right;
    width: 16.6667%;
    background-color: rgba(86, 61, 124, 0.15);
    border: 1px solid rgba(86, 61, 124, 0.2);
    padding-bottom: 10px;
    padding-top: 10px;
    box-sizing: border-box;
}

.row:before, .row:after{
    content: " ";
    display: table;
}