JSFiddle - React, Tailwind, and code Playground

by quantozzz

HTML

<body>
		<div class="main_bg">
		 <div class="pos">
		  <div class="menu">
			<li>
				<a href="#zet" class="first" id="zet">Первый заголовок</a>
			</li>
			<li>
			<a href="#alfa" class="second" id="alfa">Второй заголовок</a>
			</li>
			<li>
		   <a href="#delta"  class="third" id="delta">Третий заголовок</a>
			</li>
		  </div>	
		 </div>
		</div>
	</body>

CSS

body {	
    width:98%;
	margin-left: 1%;
	margin-right: 1%;
	
	height: 100%;
	
	background-image:none;
	background-repeat: repeat-y;
	background-attachment: scroll;
	position: absolute;

	background-color:rgba(235,235,235,1) ;
	font-family: Arial, Verdana ,sans-serif;
	font-size:12pt;
	}
li a {
	    background-color:rgba(68,62,44, 0.9);
		width:210px;
		max-width: 231px;
		min-width: 200px;
		display: block;
		position: absolute;
		text-decoration: none;
		height:40px;
		text-align:center ; 	    
		padding: 0px;
		color:black;
		margin-right: 5px;
		border-style:inset;
		border-color:rgba(118,118,118, 0.5);
		border-width:1;		
		border-radius:20px;
		list-style:none;			
}
li ul {
	position: absolute;
	display: none;
}
li:hover ul {
	display: block;
	list-style:none;
	
}
.first {
	position: absolute;
	margin-left:5px;
	margin-top: 10px;
	z-index: 5;
	box-shadow:-5px 10px 10px rgba(0,0,0,0.7);
	}
.first:hover   {
	border-style: outset;
	border-color:rgba(118,118,118, 1.0);
	border-width:2px;
    padding:2px;
	z-index: 7;
	}
.first:target {
	border-color: rgba(118,118,118, 0.5);
	border-width: 2px;
	background-color:rgba(176,165,132, 0.7);	
              }
.second {
	z-index: 3;
	position: absolute;
	margin-top: 10px;
	margin-left:230px;
	box-shadow:-5px 10px 10px rgba(0,0,0,0.7);
	}
.second:hover {
	border-style: outset;
	border-color:rgba(118,118,118, 0.8);
	border-width:2px;
    padding:2px;
	z-index: 7;

	}
.second:target {
	border-color: rgba(118,118,118, 0.5);
	border-width: 2px;
	background-color: rgba(176,165,132, 0.7);	
}
.third {
	position: absolute;
	margin-top: 10px;	
	margin-left:455px;
	z-index: 1;
	border-top-right-radius: 60px;
	border-top-left-radius: 20px;
	border-bottom-left-radius:20px;
	border-bottom-right-radius: 5px;
	box-shadow:-5px 10px 10px rgba(0,0,0,0.7);

	}
.third:hover {
	border-style: outset;
	border-color:rgba(118,118,118, 0.8);
	border-width:2px;
	padding: 3px;
	z-index: 7;
	}
.third:target {
	border-color: rgba(118,118,118,...