JSFiddle - React, Tailwind, and code Playground

by Nikhil krishnan

HTML

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

SCSS

* {
  padding: 0;
  margin: 0;
}

.wrapper {
  display: flex;
  align-items: center;
  padding: 30px;
  flex-wrap: wrap;

  .item {
    width: 100%;
    height: 100px;
    background-color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 10px white;
    box-sizing: border-box;

    @media (min-width: 768px) {
      width: 50%;
    }

    @media (min-width: 992px) {
      width: 33.33333%;
    }

    @media (min-width: 1200px) {
      width: 25%;
    }

    @media (min-width: 1600px) {
      width: 20%;
    }
  }
}