JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="left"></div>
    <div id="center">
        <img src="http://blog.mayflower.de/wp-content/uploads/2013/12/Advent_18.jpg" alt="test image" />
    </div>
    <div id="right"></div>
</div>

CSS

@media screen and (max-width: 700px) {
    body {
        background: white;
    }
}
@media screen and (max-width: 500px) {
    body {
        background: lightblue;
    }
}
@media screen and (max-width: 300px) {
    body {
        background: pink;
    }
}

img {
    max-width: 100%;
}

#wrapper {
    width: 100%;
}

#left {
    background: #ec7404;
    float: left;
    margin: 5% 1.5% 0 3%;
    width: 13%;
    height: 400px;
}

#center {
    background: #BFBFBF;
    float: left;
    margin: 5% 1.5% 0 1.5%;
    width: 55%;
    height: 400px;
}

#right {
    background: #333;
    float: left;
    margin: 5% 3% 0 1.5%;
    width: 20%;
    height: 400px;
}