JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

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

CSS

/* Media Query max-width */
@media (max-width:639px) {
  .hidden {display:none}
}
/*  Media Query min-width */
.visible {display:none}
@media (min-width:640px) {
  .visible {display:block}
}
/* some custom CSS-rules */
* {
  box-sizing:border-box
}
div {
  padding:.75rem;
  margin:1.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
}
footer span :nth-child(1) {
  margin-right:.2rem
}

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 = "ViewportWidth: " + myWidth + "px";
};