JSFiddle - React, Tailwind, and code Playground

by Chace

HTML

<div class="wrapper">
    <header class="container relative"> <a class="left logo"><img src="#" width="248" height="52" alt="" /></a>
 <a class="right" href="#"><img src="" /><img src="#" width="32" height="32" alt="" /></a>

        <div class="clear"></div>
    </header>
</div>
<div id="metrics"></div>

CSS

.wrapper {
    margin: 0 auto;
    width: 100%;
}
img {
    max-width: 100%;
}
.container {
    margin: 0 auto;
    min-width: 220px;
    max-width: 1024px;
}
.relative {
    position: relative;
}
.left {
    float: left;
}
.right {
    float: right;
}
.clear {
    clear: both;
}

JavaScript

var windowWidth = $(window).width();
var windowHeight = $(window).height();
var documentWidth = $(document).width();
var documentHeight = $(document).height();
var vScrollPosition = $(document).scrollTop();
var hScrollPosition = $(document).scrollLeft();

function updateMetrics() {
    windowWidth = $(window).width();
    windowHeight = $(window).height();
    documentWidth = $(document).width();
    documentHeight = $(document).height();
    vScrollPosition = $(document).scrollTop();
    hScrollPosition = $(document).scrollLeft();
    //display metrics
    $("div#metrics").text("");
    $("div#metrics").append("Window: W: " + windowWidth + " - H: " + windowHeight + "<br />");
    $("div#metrics").append("Doc: W: " + documentWidth + " - H: " + documentHeight + "<br />");
    $("div#metrics").append("Scroll: V: " + vScrollPosition + " - H: " + vScrollPosition + "<br />");
}

$(window).resize(function () {
    updateMetrics();
    if ($(window).width() <= 300) {
        $("a.left").animate({
            width: '100px'
        }, 2000, function () {

        });
    }
});