JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="flex-container" class="flex-container">

<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>

<div class="item">item 5</div>
<div class="item">item 6 - This box has more text in it. This box has more text in it.</div>
<div class="item">item 7</div>
<div class="item">item 8</div>

<div class="item">item 9</div>
<div class="item">item 10</div>
<div class="item">item 11 - This box has vastly more text in it than iten number 6. This box has vastly more text in it than iten number 6.</div>
<div class="item">item 12</div>

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


</div>

CSS

body {margin:0;}

.flex-container {
  max-width:1260px;
  margin:0 auto;
  
display: -ms-flexbox;display: -webkit-flex;display: flex;
-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;
-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;
-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;
-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;
-webkit-align-items: stretch;-ms-flex-align: stretch;align-items: stretch;
}

.item {
  
  width:300px;
  background-color:#eeeeee;position:relative;overflow:hidden;
  margin:0 0 20px 0;
  
-webkit-order: 0;-ms-flex-order: 0;order: 0;
-webkit-flex: 0 1 auto;-ms-flex: 0 1 auto;flex: 0 1 auto;
-webkit-align-self: auto;-ms-flex-item-align: auto;align-self: auto;
}

 /* Media Queries */   
    
@media screen and (max-width: 1300px) {
    
.flex-container {max-width:940px;}
    
}

@media screen and (max-width: 980px) {
    
.flex-container {max-width:620px;}
    
}

@media screen and (max-width: 660px) {
    
.flex-container {max-width:300px;}
    
}