JSFiddle - React, Tailwind, and code Playground

by darkajax

HTML

<div id="mainDiv">
    ClickMe!
</div>

CSS

*, html, body{
margin:0;
}
body{
color:#ffffff;
background:#3a3a3a;

}
#mainDiv{
width:300px;
border:1px solid white;
position:relative;
margin:100px auto 0;
box-shadow:0 0 30px white;
background:white;
border-radius:30px;
text-align:center;
color:black;
transition:box-shadow 3s;
-moz-transition:box-shadow 3s;
-webkit-transition:box-shadow 3s;
}
#mainDiv:hover{
box-shadow:0 0 300px white;
}

JavaScript

$('#mainDiv').click(function (){

    if(document.documentElement.requestFullScreen){
    document.documentElement.requestFullScreen();

    }else if(document.documentElement.webkitRequestFullScreen){
    document.documentElement.webkitRequestFullScreen();

    }else if(document.documentElement.mozRequestFullScreen){
    document.documentElement.mozRequestFullScreen();
    }
});