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:.75rem;margin:.25rem;border:.25rem solid #6D8BB5}
footer {position:fixed;bottom:0;left:0;right:0;display:table;width:100%;padding:.75rem;border-top:.25rem 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;
};