JSFiddle - React, Tailwind, and code Playground

by borayeris

HTML

<div class="products">
  <article id="product-1" class="product">P1</article>
  <article id="product-2" class="product">P2</article>
  <article id="product-3" class="product">P3</article>
  <article id="product-4" class="product">P4</article>

  <article id="product-5" class="product">P5</article>
</div>

SCSS

.products {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: space-between;

  .product {
    
    // set top and bottom margin only, as left and right
    // will be handled by space-between
    margin:      .25rem 0;
    
    // account your desired margin two times and substract
    // it from the base width of the row item
    flex-basis: calc(25% - (.25rem * 2));

    &.spacer {
      
      // remove all properties increasing the element height
      // from the spacers to avoid them being visible
      margin:  0;
      padding: 0;
      height:  initial;
    }
  }
}

// start demo styles (purely eye-candy not required for this to work)
* {
  box-sizing:  border-box;
  font-family: sans-serif;
}

.products {
  padding: .25rem .5rem;
  background: powderblue;
}

.product {
  height:      75px;
  line-height: 75px;
  padding:     .25rem;
  text-align:  center;
  background:  steelblue;
  color:       #fff;
  
  
  &.spacer {
    background: none;
    
    // of course, spacers should NOT have a border
    // but they are helpful to illstrate what's going on.
    border: 1px dashed gray;
  }
}
// end demo styles