JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="es">
    <head>
        <title>Pruebas de Responsive Design + CSS Transforms</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <link href="css/main.css" media="screen" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/lib/jquery.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <div id="container">
            <div id="box-1" class="box"></div>
            <div id="box-2" class="box"></div>
            <div id="box-3" class="box"></div>
            <div id="box-4" class="box"></div>
            <div id="box-5" class="box"></div>
            <div id="box-6" class="box"></div>
            <div id="box-7" class="box"></div>
            <div id="box-8" class="box"></div>
            <div id="box-9" class="box"></div>
            <div id="box-10" class="box"></div>
            <div id="box-11" class="box"></div>
            <div id="box-12" class="box"></div>
            <div id="box-13" class="box"></div>
            <div id="box-14" class="box"></div>
            <div id="box-15" class="box"></div>
        </div><!--container-->
</body>
</html>

CSS

body {
    margin: 0;
}
#container {
    margin: 100px 5% 50px 30%;
    background-color: #EEE;
    height: 1000px;
    position: relative;
}
.box {
    background-color: #F00;
    float: left;
    margin: 0 10px 10px 0;
    min-height: 100px;
    width: 50px;
}
#box-1 {
    height: 300px;
    left: 0;
}
#box-2 {
    height: 200px;
}