JSFiddle - React, Tailwind, and code Playground
HTML
<script src="ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<body>
<div id="main">
<div id="admin_div">
<h1>Admin Panel</h1>
</div>
</div>
</body>
CSS
#admin_div
{
position: absolute;
width: 80%;
height: 80%;
border: 2px solid white;
border-radius: 10px;
background-color: #D9D9D9;
z-index: 1;
}
h1 { margin-left: 15px; }
#main
{
height: 100%;
width: 100%;
z-index: 0;
}
body { background-color: black; }
JavaScript
$(document).ready
(
function()
{
var color = 1;
$('#main').click
(
function()
{
if (color == 1)
{
$(this).css("background-color", "green");
color = 2;
}
else if (color == 2)
{
$(this).css("background-color", "black");
color = 1;
}
}
);
}
);