JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
	<style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 960px;
            margin: 10px auto 0 auto;
            background: white;
            padding: 30px;
            border: 1px solid #adaa9f;
        }
        ul, div{
            margin-bottom: 10px;
        }     
        .main>div{
            padding: 10px;
            border: 1px solid #eaeaea;
            display: none;
        }
        .main div:target{
            display: block; 
        }
	</style>
</head>
<body>
	<div class="main">
		<ul>
			<li><a href="#id1">Блок 1</a></li>
			<li><a href="#id2">Блок 2</a></li>
			<li><a href="#id3">Блок 3</a></li>
			<li><a href="#id4">Блок 4</a></li>
		</ul>
		<div id="id1">Текст 1</div>		
		<div id="id2">Текст 2</div>		
		<div id="id3">Текст 3</div>		
		<div id="id4">Текст 4</div>
	</div>
</body>
</html>

CSS

/*Modal wind my*/
#tabs .tab {
	color: white;
	width: 150px;
	height: 40px;
	margin-right: 10px; 
	padding-top: 23px;
	padding-left: 60px;
	display: inline-block;
	background: rgba(128,128,128, 0.5);
	position: relative;
	cursor: pointer;
	z-index: 5;
	font-size: 20px;
	border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
#tabs .tab:nth-child(3) {
	background-image:url('images/on.png') no-repeat;

}
#tabs .tab:hover {
	animation-name: opac1;
    animation-duration: 0.5s;
	background: rgba(231,231,231, 0.9);
	color: #a35400;


}

#tabs .whiteborder {
	color: #a35400;
	font-weight: bold;
	
	background: rgba(231,231,231, 0.7);
}
#tabs .tabContent {
	animation-name: opac1;
    animation-duration: 2.5s;
	transition: 1s;
	width: 1000px;
	height: 100%;
	 background: rgba(231,231,231, 0.7);		
	position: relative;    
	z-index: 1;
	padding: 10px;
	border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
	
}
#tabs .tabContent ul li{
	list-style-type: disc;
	margin-left: 25px;
	color: #a35400;
	font-size: 18px;

}
#tabs .hide{
	animation-name: opac2;
    animation-duration: 1.5s;
	display: none;
}
#tabs .show {
	
	display: block;
}
 #tabs {
 margin: 20px;
 }

@keyframes opac1 {
    0% {
            opacity: 0;
    }

    50% {
            opacity: 0.5;
    }
    100% {
           opacity: 1;
    }
}

@keyframes opac2 {
    0% {
            opacity: 1;
    }
    50% {
            opacity: 0.5;
    }
    100% {
           opacity: 0;
    }
}

JavaScript

var tab;
var tabContent;
window.onload = function(){
	tabContent = document.getElementsByClassName('tabContent');
	tab = document.getElementsByClassName('tab');
	hideTabsContent(1);	
}

function hideTabsContent(a){
	for(var i = a; i < tabContent.length; i++){
		tabContent[i].classList.remove('show');
		tabContent[i].classList.add('hide');
		tab[i].classList.remove('whiteborder');		
	}	
}

document.getElementById('tabs').onclick = function(event){
	var target = event.target;
	if(target.className == 'tab'){
		for(var i = 0; i < tab.length; i++){
			if(target == tab[i]){

				showTabsContent(i);
				break;
			}
		}
	}
}

function showTabsContent(b){
	if(tabContent[b].classList.contains('hide')){
		hideTabsContent(0);
		tab[b].classList.add('whiteborder');
		tabContent[b].classList.remove('hide');
		tabContent[b].classList.add('show');
	}
}