JSFiddle - React, Tailwind, and code Playground

by jschr

HTML

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

CSS

.container {
  float: left;
  width: 100%;   
  padding: 0 0 1% 1%;    
}

.item {
  float: left;
  width: 24%;
  height: 100px;
  background: grey;
  margin: 1% 1% 0 0;
}

@media (max-width: 800px) {
  .item {
    width: 32.3333%
  }        
}

@media (max-width: 600px) {
  .item {
    width: 49%
  }        
}