JSFiddle - React, Tailwind, and code Playground

by Libiros

HTML

<body>
		<div class="main_bg">
		 <div class="pos">
		  <ul>
			<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="second" id="delta">Третий заголовок</a>
			</li>
			<li>
		   <a href="#delta"  class="third" id="gamma">Четвертый заголовок</a>
			</li>
		  </ul>	
		 </div>
		</div>
	</body>

CSS

ul,ol {list-style: none;}
          ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote {margin: 0; padding: 0;}
          img {border: 0;}

body {	
	background-color:rgba(235,235,235,1) ;
	font-family: Arial, Verdana ,sans-serif;
	font-size:12pt;
	}
	
ul{
list-style:none;
display:inline-block;
border:1px solid red;
width:96%;text-align:center;
}

li{
border:1px solid green;
display:inline-block;

}

li:first-child{float:left;}
li:last-child{float:right;}
	
li a {
	    background-color:rgba(68,62,44, 0.9);
		width:210px;
		display:block;
		text-decoration: none;
		height:40px;
		text-align:center ; 	    
		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;			
}

.first {
	position: relative;
	margin-top: 10px;
	box-shadow:-5px 10px 10px rgba(0,0,0,0.7);
	}

.second {
	position: relative;
	margin-top: 10px;
	box-shadow:-5px 10px 10px rgba(0,0,0,0.7);
	}	
	
.third {
	position: relative;
	margin-top: 10px;	
	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);
	}
	
.first:hover, .second:hover, .third:hover   {
	border-style: outset;
	border-color:rgba(118,118,118, 1.0);
	border-width:2px;
    padding:2px;
	z-index: 7;
	}
.first:target, .second:target, .third:target {
	border-color: rgba(118,118,118, 0.5);
	border-width: 2px;
	background-color:rgba(176,165,132, 0.7);	
              }



.main_bg {
	display: block;
	width:96%;	
	height: 400px;
	overflow: auto;
	margin:0 auto;
	background-color:rgba(177,177,177,0.1);
	border-width: 2;
	border-style: solid;
	border-color:rgba(68,62,44, 0.2);
	border-radius: 25px;
	border-top-right-radius: 120px;
	box-shadow:-5px 10px 10px rgba(0,0,0,0.7)
	}
.pos{
	position: relative;
	display: block;
    width: 96%;
	margin-right:4%;
    height:...