JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="header">
        <div id="headerleft"></div>
        <div id="headermain">
            <h1>Header</h1>
        </div>
        <div id="headerright"></div>
    </div>
    <div id="middle">
        <div id="blueleft"></div>
        <div id="contentbox">
            <!-- MAIN IMAGE -->
            <div id="herobox">
                <img src="http://www.publicdomainpictures.net/pictures/30000/velka/evening-landscape-13530956185Aw.jpg">
            </div>
            <!-- ARTICLE TITLE -->
            <h2>Main Title</h2>
            <!-- AUTHOR(S) + DATE -->
            <h3>by various authors - 16.07.16</h3>
        </div>
        <div id="blueright">
            <div id="sidebar">
                <div class="sidebarbutton">
                    <p>Lorem</p>
                </div>
                <div class="sidebarbutton">
                    <p>Ipsum</p>
                </div>
                <div class="sidebarbutton">
                    <p>Dolor</p>
                </div>
                <div class="sidebarbutton">
                    <p>Sit</p>
                </div>
                <div class="sidebarbutton">
                    <p>Amet</p>
                </div>
            </div>
        </div>
    </div>
    <div id="footer">
        <div id="footerleft"></div>
        <div id="footermiddle">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, earum illo, est odit assumenda, vero quibusdam ducimus rem laboriosam eaque, eveniet. Nostrum cum rem, ipsa voluptatem asperiores eligendi, nihil, odit quis aliquid error consequatur
                libero voluptate dolores vero minus culpa adipisci optio. Atque in, perferendis voluptas quae dolorum unde molestiae.</p>
        </div>
        <div id="footerright"></div>
    </div>
</div>

CSS

body {
    background-color: #123e64;
    padding: 0px;
    margin: 0px;
}

/* FLEXBOX */

#container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    justify-content: left;
    background-color: #123e64;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

#header {
    display: flex;
    height: 75px;
    width: 100%;
}

#headerleft {
    background-color: red;
    height: 75px;
    order: 1;
    flex: 0 0 250px;              /* ADJUSTED */
}

#headermain {
    background-color: orange;
    height: 75px;
    order: 2;
    flex: 0 0 700px;              /* ADJUSTED */
}

#headerright {
    background-color: green;
    height: 75px;
    order: 3;
    flex: 0 0 300px;               /* ADJUSTED */
}

#middle {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
}

#blueleft {
    background-color: yellow;
    order: 4;
    flex: 0 0 250px;                 /* ADJUSTED */
}

#contentbox {
    background-color: #f1f1f1;
    order: 5;
    flex: 0 0 700px;                  /* ADJUSTED */
    padding: 10px;                    /* MISCHIEF MAKER */
    box-sizing: border-box;           /* NEW */
}

#blueright {
    background-color: pink;
    order: 6;
    flex: 0 0 320px;                    /* ADJUSTED */
    padding: 0px;
    margin: 0px;
}

#herobox {
    display: flex;
    padding: 0px;
    margin: 0px;
}

#footer {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}

#footerleft {
    background-color: red;
    height: auto;
    padding: 0px;
    margin: 0px;
    order: 7;
    flex: 0 0 250px;                      /* ADJUSTED */
}

#footermiddle {
    background-color: green;
    height: auto;
    padding: 0px;
    margin: 0px;
    order: 8;
    flex: 0 0 700px;                         /* ADJUSTED */
}

#footerright {
    background-color: yellow;
    height: auto;
    padding: 0px;
    margin: 0px;
    order: 9;
    flex: 0 0 320px;
}

/* TYPOGRAPHY */

/* Headings */

h1 {
...