JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
	<img id="full" style = "height: 500px; width: 500px;"class="bg" src = "http://i.imgur.com/WgsCTDj.gif" >
    <div id="button" style=" " class="box box1"></div>    
</div>

CSS

body{
  background-color: #ADD8E6;
	width: Auto;
	height: Auto;
   
}

#help{background-color: tan;
background-color: tan;
height: 50px;
width: 50px;
z-index:100;
    position:absolute;    
    font-size:40px;
    font-weight:bold;
    left: 1075px;
    top: 30px;
	border: solid black 3px;
	
	
	}
	









#login{
	margin-top: 25%;}
	
	

video{
z-index:100;
    position:absolute;    
    left: 150px;
    top: 75px;
	

}

#instructions{
background-color: tan;
height: 400px;
width: 600px;
z-index:100;
    position:absolute;    
    font-size:24px;
    font-weight:bold;
    left: 325px;
    top: 100px;
	border: solid black 3px;
}

p{font-size: 12pt; 
color: black
}



.wrap {
    position: relative;
    overflow: auto;
}

.bg {
    float: left;
    width: 100%;
}

.box {
    position: absolute;
    cursor: pointer;
}
.box1 {
    top: 95%;
    left: 0;
    width: 7%;
    height: 5%;
}

JavaScript

var w =screen.availWidth - 20 + "px",
    h =screen.availHeight - 80 + "px",
    s = document.getElementById('full').style;
s.height = h;
s.width=w;

alert(h+w);

checkCookie();
document.getElementsByClassName('box1')[0].addEventListener('click', correct, false); 
document.getElementsByClassName('box1')[0].addEventListener('mouseover', shade, false);
document.getElementsByClassName('box1')[0].addEventListener('mouseout', unshade, false);
document.getElementsByClassName('bg')[0].addEventListener('click', wrong, false);


function shade()
{
    
    document.getElementById('button').style= "background-color: #ADD8E6; opacity:.4;";
    
}

function unshade()
{
    
    document.getElementById('button').style= " ";
    
}

function loc()
{
    var lo = "OS2.html";
    
    return lo;
    
} 



function getCookie(c_name)
{
    var i,x,y,ARRcookies=document.cookie.split(";");
    for (i=0;i<ARRcookies.length;i++)
    {
        x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
        y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
        x=x.replace(/^\s+|\s+$/g,"");
        if (x==c_name)
        {
            return unescape(y);
        }
        
    }
    return false; //get rid of this if something doesnt work
}

function setCookie(c_name,value,exdays)
{
    
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value=escape(value) + ((exdays===null) ? "" : "; expires="+exdate.toUTCString());
    document.cookie=c_name + "=" + c_value;
    //alert("Your score is " + score);
    //alert("Cookie Set");
}

function checkCookie(end)
{
    var score=getCookie("scorecount");
    if (score!==null && score!=="")
    {
        if(end == 'yes')
        {
            
            score = score - 1;
            
            
            
            
            return score;
            
            //alert("Your score is " + score);
        }
    }
    else 
    {
        
        score=1;
        if (score!==null && score!=="")
   ...