JSFiddle - React, Tailwind, and code Playground

by Erasus

HTML

<div class="flexbox-container">
  <div class="flexbox-item">Item 1</div>
  <div class="flexbox-item">Item 2</div>
  <div class="flexbox-item">Item 3</div>
  <div class="flexbox-item">Item 4</div>
</div>

CSS

.flexbox-container {
 display: flex;
 flex-wrap: wrap;
 flex-direction: row;
 gap: 1em;
 }

.flexbox-item {
  width: 25%;
  background-color: lightgreen;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 992px) {
  .flexbox-item {
    width: 50%;
  }
}