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 = true;

			$( ".settings_link" ).click(function() { 
				event.preventDefault();
				if (clickOnSettings) {
					$( "#coverup" ).toggleClass( "cover1" );
					$( "#settingani" ).toggleClass( "settings1" );
					clickOnSettings = false;
				}
			});
			$( "#coverup" ).click(function() { 
				if (!clickOnSettings) {
					$( "#coverup" ).toggleClass( "cover2" );
					$( "#settingani" ).toggleClass( "settings2" );
					clickOnSettings = true;
				}
			});