JSFiddle - React, Tailwind, and code Playground

HTML

<section id="rowArea">
   <div class="row fiveRow clearfix">
        <div class="rowItem"></div>
        <div class="rowItem"></div>
        <div class="rowItem"></div>
        <div class="rowItem"></div>
        <div class="rowItem"></div>
   </div>
   <div class="row fourRow">
        <div class="rowItem"></div>
        <div class="rowItem"></div>
        <div class="rowItem"></div>
        <div class="rowItem"></div>
   </div>
   <div class="row fiveRow">
        <div class="rowItem"></div>
        <div class="rowItem"></div>
        <div class="rowItem"></div>
        <div class="rowItem"></div>
        <div class="rowItem"></div>
   </div>
</section>

CSS

.rowItem {
    width: 20%;
    height: 20%;
    float: left;
    background: #eee;
    outline: 1px solid red;
}

.row {height:auto; }
   .fourRow, .fiveRow {width:100%; padding:0 0; }
      .fourRow .rowItem, .fiveRow .rowItem {width:50%; height:100px; float:left; }