JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<div class="hidden">foobar</div>
<div class="visible">foobar</div>
<footer>ViewportWidth: <span id="dimension"></span>px</footer>

CSS

/* max-width */
@media (max-width:639px) {
  .hidden {display:none}
}
/* min-width */
.visible {display:none}
@media (min-width:640px) {
  .visible {display:block}
}
/* custom rules */
* {box-sizing:border-box}
div {padding:.5rem;margin:.25rem;border:thin solid #ccc}
footer {position:fixed;bottom:0;left:0;right:0;display:table;width:100%;padding:.5rem;border-top:.3rem solid #6D8BB5;background:rgba(215,235,255,.75);text-align:right;font-weight:600}

JavaScript

window.onresize = displayWindowSize;
window.onload = displayWindowSize;
function displayWindowSize() {
    var myWidth = 0;
    if(typeof(window.innerWidth) == 'number' ) {
        myWidth = window.innerWidth;
    } else if(document.documentElement && (document.documentElement.clientWidth)) {
        myWidth = document.documentElement.clientWidth;
    } else if(document.body && (document.body.clientWidth)) {
        myWidth = document.body.clientWidth;
    }
    document.getElementById("dimension").innerHTML = myWidth;
};