JSFiddle - React, Tailwind, and code Playground

by deztructicus

HTML

<html>
    <head>
        <script type="text/javascript">
            var isFullscreen = false;
            
            function fullscreen(){
            
            //var  d = document.getElementById('controls').style;
            var d = {};
            var speed = 900;
            if(!isFullscreen){ // MAXIMIZATION
            
            /*comment to have smooth transition from centre but loose covering the header*/
            document.getElementById('controls').style.position= "absolute";
            
            d.width = "100%";
            d.height="100%";                    
            d.left="0%";
            d.top="0%";
            d.margin="0 0 0 0";
            $("#controls").animate(d,speed);
            
            isFullscreen = true;
            }else{ // MINIMIZATION
            
            d.width="300px";
            d.height="100px";
            d.margin="0 auto";
            d.position="relative";
            
            /* comment to have smooth minimze transition but not be placed below header */
             document.getElementById('controls').style.position= "relative";
            
            $("#controls").animate(d,speed);
            isFullscreen = false;
            }
            
            }
            
        </script> 
        <style> 
            #controls{
            width:300px;
            height:100px;
            margin: 0 auto;
            }   
            
        </style> 
        
    </head>
    <body>
        <h1 align=center> Header (To be covered on Fullscreen) </h1>
        <div id='controls' style="background-color:green;" align="center">
            <input type='button' value='fullscreen' onclick='fullscreen();' />
        </div>
    </body>
</html>