JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">

  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>

</div>

CSS

* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}
body {
  margin: 0;
}

.item {
  height: 100px;
  background: #eee;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .block {
    display: flex;
  }
  .item {
    width: calc(25% - 15px);
  }
  .item:not(:last-child) {    
    margin-right: 20px;
  }
}