JSFiddle - React, Tailwind, and code Playground

by aldomatic

HTML

<div id="wrap">
    <p>Screen Width: <span></span></p>
</div>

CSS

#wrap{
     padding:20px;  
   font-family:arial;
  font-size:14px;  
}
h3{
   font-family:arial;     
}
span{
    color:red;    
}

JavaScript

$(function() {
    function adjustStyle(width) {
        var width = parseInt(width);
        if (width < 701) {
            $("p > span").text("< 701");
            //$("#styleSheet").attr("href", "css/narrow.css");
        } else if ((width >= 701) && (width < 900)) {
            $("p > span").text("> 701 && < 900");
            //$("#styleSheet").attr("href", "css/medium.css");
        } else {
            $("p > span").text("Wide A$$");
            //$("#styleSheet").attr("href", "css/wide.css"); 
        }
    }

    // Set initial width onLoad
    adjustStyle($(this).width());

    // Set width on resize event
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});