JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<h1>Jquery live screen size Example (Resize window)</h1>
<!-- jQuery -->
<p class="screen-size">
    <strong>jQuery resize:</strong>
    <span id="jqWidth">0</span>,
    <span id="jqHeight">0</span>
</p>

CSS

h1{
    font-size:32px;
    margin-bottom:20px;
}
.screen-size{
    font-size:21px;
}

JavaScript

// jQuery
function jqUpdateSize(){
    // Get the dimensions of the viewport
    var width = $(window).width();
    var height = $(window).height();

    $('#jqWidth').html(width);
    $('#jqHeight').html(height);
};
$(document).ready(jqUpdateSize);    // When the page first loads
$(window).resize(jqUpdateSize);     // When the browser changes size