JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<!-- <header>header</header> -->
    <div id='main'>
        <article>
            <div id="row-inline">
                <h1 id="flex-item">
                    Colour Box
                </h1>
                <input type="text" name="" value="" placeholder="Search..." id="flex-item" >
            </div>

            <ul id="row">
              <li id="flex-item"> 
                  <div id="item">
                      <div id="some">
                          1
                      </div>
                  </div>
              </li>
              <li id="flex-item">2</li>
              <li id="flex-item">3</li>
              <li id="flex-item">4</li>
              <li id="flex-item">3</li>
              <li id="flex-item">4</li>
              <li id="flex-item">1</li>
              <li id="flex-item">2</li>
              <li id="flex-item">3</li>
              <li id="flex-item">4</li>
              <li id="flex-item">3</li>
              <li id="flex-item">4</li>
            </ul>

        </article>
        <nav>

        </nav>
        <aside>

        </aside>
    </div>
    <!-- <footer>footer</footer> -->
</body>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

body {
    background: #eeeeee;
}

#main {
    /*min-height: 800px;*/
    margin:    0px;
    padding:   0px;
    display:   flex;
    flex-flow: row;
}
 
#main > article {
    margin:         0 10px 0 10px;
    /*padding-left:   0 10px 0 10px;*/
    padding: 1em;
    /*border:        1px solid #cccc33;*/
    box-shadow:    0 0 10px #dfdfdf;
    background:    #ffffff;
    flex:          3 1 60%;
    order:         2;
    height:        100vh;
}
  
#main > nav {
    background:    #191818;
    flex:          1 6 10%;
    order:         1;
}
  
#main > aside {
    background:    #f6f6f6;
    flex:          1 6 20%;
    order:         3;
}

#row { 
    padding:         0;
    margin:          0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
      
    -webkit-flex-flow: row wrap;
    justify-content: space-around;
}

#row-inline {
    display:       inline-flex;
    margin-bottom: 1em;
}

#flex-item {
    padding: 0 10px 0 10px;
}

#row li {
    list-style: none;
    background: tomato;
    padding:    0px;
    width:      20%;
    height:     25%;
    /*margin-top: 0.5em;*/
    margin:     0.25em;
      
    line-height: 500%;
    color:       white;
    font-weight: bold;
    font-size:   3em;
    text-align:  center;
}

#item {
    /*display: table-cell;*/
/*    height: 20%;
    width: 100%;*/
}

#some {
    max-height: 10%;
}

#item div {

    /*height: 50%;*/
    background-color: black;
}

#item div:hover {
    background-color: grey;
}


header, footer {
    display:    block;  
    background: #0c0c0c;
}

footer {
    min-height: 100px;
}
 
  /* Too narrow to support three columns */
@media all and (max-width: 640px) {
  
    #main, #page {
        flex-flow:      column;
        flex-direction: column;
    }

    #main > article, #main > nav, #main > aside {
        order: 0;
    }
      
    #main...