JSFiddle - React, Tailwind, and code Playground

by dswitzer

HTML

<html>
    <head>
        <script type="text/javascript">
            var isFullscreen = false;
            
            function fullscreen(){
            
            //var  d = document.getElementById('controls').style;
            var d = {};
            var speed = 150;
            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="0px";
            //d.margin="0 0 0 0";
            $("#header").animate({ 
            height: 0
            }, speed);
            $("#controls2").animate(d,speed);
            
            isFullscreen = true;
            }else{ // MINIMIZATION
            
            d.width="300px";
            d.height="100px";
            d.margin="0 auto";
            d.position="relative";
            //d.top="+=30px";
            
            /* comment to have smooth minimze transition but not be placed below header */
            // document.getElementById('controls').style.position= "relative";
            
            $("#header").animate({ 
            height: 30
            }, speed);
            $("#controls2").animate(d,speed);
            isFullscreen = false;
            }
            
            }
            
        </script> 
        <style> 
            * { margin: 0 }
            
            #controls {
            width:100%;
            height:100%;
            margin: 0 auto;
            display:block;
            position:absolute;
            left: 50%;
            z-index:5;
            } 
            #controls2 {
            overflow:visible;
            width: 300px;
            height: 100px;
            position: relative; 
            left: -50%; 
            background-color: green;
            z-index:10;
 ...