JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<title></title>
<style type="text/css">
* { margon: 0; padding: 0; }


#cajon {
    width: 100%;
    margin: 0 auto;
}
    
@media (max-width:1999px) {
    #cajon {
        width: 1800px;
    }
}

@media (max-width:1799px) {
    #cajon {
        width: 1600px;
    }
}

@media (max-width:1599px) {
    #cajon {
        width: 1400px;
    }
}

@media (max-width:1399px) {
    #cajon {
        width: 1200px;
    }
}

@media (max-width:1199px) {
    #cajon {
        width: 1000px;
    }
}

@media (max-width:999px) {
    #cajon {
        width: 800px;
    }
}

@media (max-width:799px) {
    #cajon {
        width: 600px;
    }
}

@media (max-width:599px) {
    #cajon {
        width: 400px;
    }
}

#cajon div {
    width: 198px;
    height: 350px;
    border: #333 solid 1px;
    float: left;
}
</style>
</head>
<body>
    
    <div id="cajon">
    
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        
        <div></div>
        <div></div>
        <div></div>
        <div></div>

    </div>

</body>
</html>