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"> 
                  <img src="http://i.imgur.com/phTeXXe.jpg" alt="">
                        <h2 id="centered-text">
                            Some caroon boobs!
                        </h2>
              </li>
            </ul>

        </article>
        <nav>

        </nav>
        <aside>

        </aside>
    </div>
</body>

CSS

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

body {
    background: #eeeeee;
    height: 100vh;
    width:  100vw;
}

#main {
    margin:    0px;
    padding:   0px;
    display:   flex;
    flex-flow: row;
    height:    100%;
    width:     100%;
}
 
#main > article {
    margin:        0 10px 0 10px;
    padding:       1em;
    box-shadow:    0 0 10px #dfdfdf;
    background:    #ffffff;
    flex:          3 1 60%;
    order:         2;
}
  
#main > nav {
    background:    #191818;
    flex:          1 6 10%;
    order:         1;
}
  
#main > aside {
    background:    #f6f6f6;
    flex:          1 6 20%;
    order:         3;
}

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

    height: 1%;
}

#row-inline {
    display:       inline-flex;
    margin-bottom: 1em;
/*    height:        4%;
    width:         100%;*/
}

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

#row li {
    list-style: none;
    background: tomato;
    padding:    0;
    width:      20%;
    height:     100%;
    margin:     0.25em;
      
    line-height: 157px;
    color:       white;
    font-weight: bold;
}

#download-button {
    padding:         5px 10px 5px 10px;
    color:           #000;
    text-decoration: none;
    background:      darkkhaki;
    text-align:      center;
    font:            0.7em Helvetica;
}

#centered-text {
    text-align:     center;
    vertical-align: middle;
}

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 > nav, #main...