JSFiddle - React, Tailwind, and code Playground

by Chace

HTML

<div id="browserSize">hi</div>
<div id="metrics"> <span>Window: </span>
 <span id="winH">0</span> x <span id="winW">0</span>
    <br/> <span>Document: </span>
 <span id="docH">0</span> x <span id="docW">0</span>
    <br/> <span>Scroll: </span>
 <span id="scrH">0</span> x <span id="scrW">0</span>
    <br/>
</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

function updateMetrics() {
    windowWidth = $(window).width();
    windowHeight = $(window).height();
    documentWidth = $(document).width();
    documentHeight = $(document).height();
    scrollV = $(document).scrollTop();
    scrollH = $(document).scrollLeft();
    $("span#winH").text(windowHeight);
    $("span#winW").text(windowWidth);
    $("span#docH").text(documentHeight);
    $("span#docW").text(documentWidth);
    $("span#scrH").text(scrollV);
    $("span#scrW").text(scrollH);
}

$(window).resize(function () {
    updateMetrics();
    mWidth = $(window).width();
    if (mWidth <= 300) {
        $("div#browserSize").text("Small Device");
    } else if (mWidth > 300 && mWidth < 600) {
        $("div#browserSize").text("Medium Device");
    } else {
        $("div#browserSize").text("Large Device");
    }
});