JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div class="skeleton">
		<div class="menu">
			ПОКА НИЧЕГО НЕ РАБОТАЕТ!!!!    <!--Код не трогать-->
			<div class="right mr2">
				<a href="index.html" class="menu__link">
					В начало
				</a>
				<a href="#" class="menu__link">
					О нас
				</a>
				<a href="#" class="menu__link">
					Настройки
				</a>
				<a href="#" class="menu__link">
					Профиль
				</a>
				<a href="#" class="menu__link">
					Помощь
				</a>
				<a href="#" class="menu__link">
					Авторизация
				</a>
			</div>
			<div class="clearfix">
			</div>
		</div>
		<div class="content mh20 sans-serif">
			<div class="circle circle__main">
				<div class="circle__inv">
					<span class="circle__text"> Выберите интересующую тему </span>
				</div>
			</div>
			<div class="circle">
				<div class="circle__inv">
					<span class="circle__text">Что-то</span>
				</div>
			</div>
		</div>
		<div class="footer">
			Мыло там, копирайт все дела
		</div>
	</div>
</body>

CSS

body {
	margin:	0;
	font-family:	"Trebuchet MS";
	font-size:	14px;
	color:	#EDE6E6;
}
/*All pages start*/

.menu {
	padding:	20px 0 20px 0;
	background:	#D7C2D9;
	color:	 #000;
}
.menu__link {
	text-decoration:	none;
	font-size:	20px;
	color:	#5F0C66;
	transition: 0.5s ease-in;
	margin-left:	10px;
}
.menu__link:hover {
	box-shadow:	-10px 10px 5px rgba(133,161,171,1);
	color:	#13660C;
}
.skeleton {
	margin:	0 auto;
	width:	80%;
}
.content {
	margin-bottom:	50px;
	position: relative;
}
.footer {
	background:	#A3A0A0;
	text-align:	center; 
	padding: 20px 0 20px 0;
}
.sans-serif {font-family:	sans-serif; }
.ml2{ margin-left:	2%; }
.mr2 { margin-right:	2%; }
.clearfix { clear:	both; }
.right { float:	right; }
.mh20 { margin:	20% auto; }
/*All pages end*/

/*Main page code zone start*/
.half {
	width:	48%;
	float:	left;
	font-size:	28px;
	display:	block;
	text-decoration:	none;
	color:	#EDE6E6;
	transition:	1s;
	position:	relative;
}
.half:hover {
	transform:	scale(1.05);
}
.bg {
	width:	100%;
	height:	100%;
}
.half div {
	position:	absolute;
	top:	0;
	left:	0;
	text-align:	center;
	width:	100%;
}
.bg__text {
	margin:	0 auto;
}
.instruction{
}
.soft {
	height:	500px;
	text-align:	center;
	width:	96%;
}
.chat {
}
/*Main page code zone end*/

/*Manual page code zone start*/
.circle {
	width:	10%;
	background:	#900C3F;
	border-radius:	50%;
	text-align:	center;
	font-size:	18px;
	margin:	0 auto;
	cursor: pointer;
	transition:	1s ease-in;
	overflow:	hidden;
	position:	absolute;
}
.circle:hover {
	background:	#0C905D;
}
.circle__main {
	width:	20%;
	position:	static;
}
.circle__inv {
	width:	100%;
	height:	100%;
	padding-top:	50%;
}
.circle__text {
	transform:	translateY(-50%);
	display:	inline-block;
}

JavaScript

window.onload = function() {
	//elements start
	var circle = document.querySelectorAll(".circle");
	var circIn = document.querySelectorAll(".circle__inv");
	var circleHead = document.querySelector(".circle__main");	
	//elements end
		
	//iteration variables start 
	var countSize = 0;
	 //iteration variables end
	 
	//cycles for multiple objectsstart	
	for(var i = 0;i<circle.length;i++) {
		circle[i].style.height = circle[i].offsetWidth + "px";
	}; 
	//cycles for multiple objects end
	
	//interactive elements start
	circleHead.onclick = function() {
		if(countSize  == 0) {
			circleHead.style.transform = "scale(0.8)";
			countSize ++;
		}
		else {
			circleHead.style.transform = "scale(1)";
			countSize --;
		}
	};
	//interactive elements end
};