JSFiddle - React, Tailwind, and code Playground

by sandeep kumar

HTML

<div>
   <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>
 </div>

CSS

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body{
  margin: 0;  
}

div {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  background: blue;
  height:auto;
  min-height:300px; // For testing purpose only
}
@media (min-width: 768px) {
  div {
    width: 750px;
    background: silver;
  }
}
@media (min-width: 992px) {
  div {
    width: 970px;
    background: yellow;
  }
}
@media (min-width: 1200px) {
  div {
    width: 1170px;
    background: red;
  }
}