JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div style="height: 100%;">
<div id="method1">Content1</div>
<br />
<div id="method2">Content2</div>
<br />
<div id="method3">Content3</div>
</div>

CSS

html {
    height: 100%;
    overflow: hidden;
    display: block;
    text-align: center;
    margin: 0px auto;
}
body {
    height: 100%;
    display: block;
    margin: 0px 5%;
    text-align: center;
}
#method1, #method2, #method3 {
    display: inline-block;
    height: 150px;
    width: 150px;
    border: solid 1px #000000;
    margin: 1px;
    text-align: center;
    vertical-align: middle;
}
#method1 {
    background-color: blue;
    color: white;
}
#method2 {
    background-color: green;
    min-height: 10% !important;
    height: 500px;
    max-height: 30%;
    width: 40% !important;
    
}
#method3 {
    background-color: red;
}

JavaScript

//Method 1: Pure Javascript
function resize(width, height) {
    var target = document.getElementById("method1");
    target.setAttribute("style","width:" + width + "px");
    target.setAttribute("style", "height:" + height + "px");
    console.log("here");
} // end function
window.onresize = function() {
    var height = (window.innerHeight / 4);
    var width = (window.innerWidth / 4);
    console.log(height);
    resize2(height, width);
}
//Method #3 Jquery animate
$(function() {
    $(window).on("resize", function(e, data) {
        $("#method3").animate({height: window.innerHeight / 4, width: window.innerWidth / 4}, 600)
    });
});