JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<div id="content">

   <div class="row wide worklist"> 
      <div class="item">
         <img class="thumbnail" src="http://placehold.it/250x250"> 
      </div>
      <div class="item">
         <img class="thumbnail" src="http://placehold.it/250x250">
      </div>
      <div class="item">
         <img class="thumbnail" src="http://placehold.it/250x250">
      </div>
      <div class="item">
         <img class="thumbnail" src="http://placehold.it/250x250">
      </div>
      <div class="item">
         <img class="thumbnail" src="http://placehold.it/250x250">
      </div>
      <div class="item">
         <img class="thumbnail" src="http://placehold.it/250x250">
      </div>
      <div class="item">
         <img class="thumbnail" src="http://placehold.it/250x250">
      </div>
      <div class="item">
         <img class="thumbnail" src="http://placehold.it/250x250">
      </div>
      <div class="item">
         <img class="thumbnail" src="http://placehold.it/250x250">
      </div>
      <div class="item">
         <img class="thumbnail" src="http://placehold.it/250x250">
      </div>
      <div class="item">
         <img class="thumbnail" src="http://placehold.it/250x250">
      </div>
      <div class="item">
         <img class="thumbnail" src="http://placehold.it/250x250">
      </div>
   </div>

</div>

CSS

body, html{
   background: #555;
}

#content {
   max-width: 1200px;
   min-width: 320px;
   margin: auto;
}

#content .row.wide {
   width: 100%;
}

#content .row.worklist {
   display: flex;
   flex-wrap: wrap;
}

#content .row.worklist .item {
   flex: 1 0 550px;
   box-sizing: border-box;
   color: #f00;
   padding: 5px;
}

#content .row.worklist .item .thumbnail {
   height: 100%;
   width: 100%;
   max-width: 290px;
   background: #555;
}

@media (min-width: 400px) {
   #content .row.worklist .item {
      max-width: calc(50% - 10px);
   }
}

@media (max-width: 400px) {
   #content .row.worklist {
      text-align: center;
      display: block;
   }
   #content .row.worklist .item {
      padding: 0;
   }
}

@media (min-width: 600px) {
   #content .row.worklist .item {
      max-width: calc(33.33% - 10px);
   }
}

@media (min-width: 820px) {
   #content .row.worklist .item {
      max-width: calc(25% - 10px);
   }
}

@media (min-width: 1080px) {
   #content .row.items .item {
      max-width: calc(20% - 10px);
   }
}