JSFiddle - React, Tailwind, and code Playground

HTML

<div class="" id="coverup"></div>
<div class="" id="settingani"></div>
<a href="" class="settings_link">SETTINGS</a>

CSS

.cover1 {
	margin-top: 0px;
	width: 100%;
	height: 100%;
	background-color: #000000;
	position:fixed;
	opacity: 0.75;
	z-index: 9;
	-webkit-animation: ani_cover1 0.3s;
}
.cover2 {
	margin-top: 0px;
	width: 100%;
	height: 100%;
	background-color: #000000;
	position:fixed;
	opacity: 0;
	z-index: -2;
	-webkit-animation: ani_cover2 0.3s;
}
@-webkit-keyframes ani_cover1 {
    from {opacity: 0;}
    to {opacity: 0.75;}
}
@-webkit-keyframes ani_cover2 {
    from {opacity: 0.75; z-index: 9;}
    to {opacity: 0; z-index: 9;}
}

/* SettingslĂĄdan */

.settings0{
	height: 100px;
	width: 100px;
	margin-left: auto ;
	margin-right: auto ;
	border: 2px solid #1C2D3D;
	background-color: #bbddff;
	position:fixed;
	top: 100px;
	right: -100px;
	z-index: -2;
}
.settings1{
	height: 100px;
	width: 100px;
	margin-left: auto ;
	margin-right: auto ;
	border: 2px solid #1C2D3D;
	background-color: #bbddff;
	position:fixed;
	top: 100px;
	right: 100px;
	z-index: 10;
	-webkit-animation: ani_settings1 0.3s;
}
.settings2{
	height: 100px;
	width: 100px;
	margin-left: auto ;
	margin-right: auto ;
	border: 2px solid #1C2D3D;
	background-color: #bbddff;
	opacity: 0;
	position:fixed;
	top: 100px;
	right: -10px;
	z-index: -2;
	-webkit-animation: ani_settings2 0.3s;
}
@-webkit-keyframes ani_settings1 {
    from {opacity: 0; right: -10px;}
    to {opacity: 1; right: 100px;}
}
@-webkit-keyframes ani_settings2 {
    from {opacity: 0.75; z-index: 10; right: 100px}
    to {opacity: 0; z-index: 10; right: -10px;}
}

JavaScript

var clickOnSettings = false;
$( ".settings_link, #coverup" ).click(function() { 
    event.preventDefault();
    clickOnSettings = ! clickOnSettings;
    //Toggle all classes.
    $( "#coverup" ).toggleClass( "cover1", clickOnSettings);
    $( "#settingani" ).toggleClass( "settings1", clickOnSettings);
    $( "#coverup" ).toggleClass( "cover2", !clickOnSettings);
    $( "#settingani" ).toggleClass( "settings2", !clickOnSettings);
});