JSFiddle - React, Tailwind, and code Playground

by Artur Stambultsian

HTML

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

CSS

.container {
    width: 1200px;
    overflow: hidden;
    background: #ccc;    
}
.element {
    width: 198px;
    height: 100px;
    float: left;
    background: #444;
    border: 1px solid #000;
}

@media screen and (max-width: 1000px) {
   .container {
        width: 800px;        
   }
} 
@media screen and (max-width: 800px) {
   .container {
        width: 600px;        
   }
} 
@media screen and (max-width: 600px) {
   .container {
        width: 400px;        
   }
}