JSFiddle - React, Tailwind, and code Playground

HTML

<body>

    <div class="container scr">
        <div class="header scr">This is my awsome Header</div>
        <div class="content scr">

            <img src="http://www.deargrumpycat.com/wp-content/uploads/2013/02/Grumpy-Cat1.jpg">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet justo eros. Integer nec mauris eget lacus fermentum volutpat. Nunc id massa et purus mollis ornare. Vestibulum convallis tincidunt consectetur. Donec pulvinar ut ante quis convallis. Proin vulputate ultrices dapibus. Donec consequat interdum ante ac hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi id massa elementum, lacinia lacus ut, cursus diam. Morbi ut mollis enim, id facilisis mi. Ut vel pellentesque urna, sit amet vestibulum augue.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet justo eros. Integer nec mauris eget lacus fermentum volutpat. Nunc id massa et purus mollis ornare. Vestibulum convallis tincidunt consectetur. Donec pulvinar ut ante quis convallis. Proin vulputate ultrices dapibus. Donec consequat interdum ante ac hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi id massa elementum, lacinia lacus ut, cursus diam. Morbi ut mollis enim, id facilisis mi. Ut vel pellentesque urna, sit amet vestibulum augue.</p>

        </div>
        <div class="footer">
            This is my awsome Footer
        </div>


    </div>

CSS

.container {
    width: 800px;
    margin: 0 auto;
    font-size: 14px;
    font-family: sans-serif;
}

.container.scr-sm {
    width: 90%;
}

.container.scr-xs {
    width: 90%;
    font-size: 12px;
}

.header {
    padding: 30px;
    color: #fff;
    background-color: dodgerblue;
    font-weight: bold;
    font-size: 20px;
}

.header.scr-sm {
    padding: 10px;
    font-size: 16px;
}

.header.scr-xs {
    font-weight: normal;
    padding: 5px;
    text-align: center;
    font-size: 14px;
    background-color: lightskyblue;
}

.content {
    margin: 30px 0;
}

.content.scr-sm, .content.scr-xs {
    margin: 15px 0;
}

.content img {
    float: left;
    margin: 0 10px 10px 0;
    width: 365px;
}

.content.scr-sm img {
    width: 200px;
}

.content.scr-xs img {
    float: none;
    width: 100%;
}

.footer {
    border-top: 1px solid gray;
    padding: 10px;
    font-size: 90%;
    text-align: center;
}

JavaScript

function viewport() {
            var e = window, a = 'inner';
            if (!( 'innerWidth' in window )) {
                a = 'client';
                e = document.documentElement || document.body;
            }
            return { width: e[ a + 'Width' ], height: e[ a + 'Height' ] }
        }

        function responsiveCss() {
            var wd = viewport().width;
            var cl = "scr-md";
            if (wd <= 768) {
                cl = "scr-xs"; // mobile
            } else if (wd >= 768 && wd < 992) {
                cl = "scr-sm"; // tablet
            } else if (wd >= 1200) {
                cl = "scr-lg";
            }
            $(".scr").each(function () {
                $(this).removeClass("scr-xs scr-sm scr-md scr-lg");
                $(this).addClass(cl);
            });
        }

        $(document).ready(function () {
            responsiveCss();
            window.onresize = function () {
                responsiveCss();
            };

        });