JSFiddle - React, Tailwind, and code Playground

HTML

<div class="saveWork" style="z-index:-2; ">
		<ul id="drop-nav" style="position: relative;margin-left:210px; margin-top:-10px; z-index:100; font-style:Calibri; letter-spacing:2px;">
  				<li><a href="#">New</a>
   		    	<ul>
     				 <li><a href="New.jsp">9:00 - 11:00</a></li>
    			</ul>
                <li><a href="#" id="editt">Edit</a>
   		    	<ul>
     				 <li><a href="#">9:00 - 11:00</a></li>
    			</ul>
    			</li>
    			<li><a href="#">Delete</a>
   		    	<ul>
     				 <li><a href="Delete.jsp">9:00 - 11:00</a></li>
    			</ul>
    			</li>
    			<li><a href="MyProfile.jsp">My Profile</a>
    			</li>
				<li>
					<p id="demo" style="margin-top:1px; margin-left:130px;cursor:pointer; " onmouseover="myFunction()" onclick="tada()"    	
						onmouseout="document.getElementById('demo').style.color = 'white'">Logout</p>
			</ul>
	</div>	

<br/>
<img id="workArea" src="http://www.greenman.net/sites/default/files/LKJ.jpg"></img>
<div id="Output" cols="10" rows="5"></div>

CSS

body {
	background-image: url("c3.jpg");
	background-size: cover;
}

#container {
	position: absolute;
	top: 234px;
	right:479px;
	z-index: 100;
}

#container1 {
	position: absolute;
	top: 97px;
	right: 0px;
	z-index: 100;
}

#login {
	position: absolute;
	bottom: -180px;
	right: 258px;
	z-index: 100;
	height: 40px;
	width: 150px;
	color: black;
	font-family: 'Crushed', cursive;
	font-size:28px;
}


#cbox {
	position: absolute;
	bottom: -115px;
	right: 150px;
	z-index: 100;
}

#signup {
	position: absolute;
	bottom: -179px;
	right: -8px;
	z-index: 100;
	height: 40px;
	width: 150px;
	color: black;
	font-family: 'Crushed', cursive;
	font-size:28px;
	text-align:center;
}

#rem{
	position: absolute;
	bottom: -140px;
	right: 10px;
	z-index: 100;
	color: black;
}

#su {
	position: absolute;
	bottom: -210px;
	right: 35px;
	z-index: 100;
	color: black;
	font-size:28px;
}

a {
	margin-top: 10px;
	letter-spacing: 2px;
}

#textbox1 {
	top: 200px;
	right: 420px;
	position: absolute;
}

#textbox2 {
	top: 57px;
	right: 0px;
	position: absolute;
}

#textbox3 {
	top: 113px;
	right: 0px;
	position: absolute;
}

#textbox4 {
	top: 173px;
	right: 0px;
	position: absolute;
}

#textbox5 {
	top: 237px;
	right: 0px;
	position: absolute;
}

#textbox6 {
	top: 297px;
	right: 0px;
	position: absolute;
}

#textbox7 {
	top: 362px;
	right: 0px;
	position: absolute;
}

#textbox8 {
	top: 415px;
	right: 0px;
	position: absolute;
}

#textbox9 {
	top: 472px;
	right: 0px;
	position: absolute;
}

.main_container {
	width: 100%;
	margin-left: 200px;
	padding-bottom: 150px;
}

.menu_area {
	width: 20%;
	float: left;
	height: 600px;
	background-color: rgba(0, 0, 200, 0.1);
}

.content_area {
	background: url('seat.png');
	position: absolute;
	width: 900px;
	height: 575px;
	z-index: -1;
	top: 220px;
	left: 210px;
	align: center;
	margin-top: 50px;
}

.lb_image {
	width: 100px;
	margin-left: 10px;
}

.a2 {
	text-decoration: none;
	font-family: Arial Narrow;
	letter-spacing: 1px;
}

.a2:hover...

JavaScript

$('#Output').val(localStorage.getItem('workData'));

var saveConfirm = "Your work has been saved!";

$("#saveWork").click(function () {

    $('#saveWork').replaceWith(document.createTextNode(saveConfirm)).show();

    localStorage.setItem('workData', document.getElementById('workArea'));
});