JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>FullPage</title>
	<link rel="stylesheet" href="style/style.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" /defer></script>
    <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js" /defer></script>
</head>
<body>
	<nav class="fix-menu">
		<div class="top-menu">
 			<div class="menuToggle"><a href="#" class="menu-btn"><span></span></a></div>
			<ul class="menu clearfix">
				<li><a href="#"><i class="fas fa-home"></i>   Главная</a></li>
				<li><a href="#"><i class="fab fa-phoenix-squadron"></i>	Проекты</a></li>
				<li><a href="#"><i class="fab fa-d-and-d"></i>	Дизайн</a></li>
				<li><a href="#"><i class="fas fa-award"></i>   Сертификаты</a></li>
				<li><a href="#"><i class="fas fa-tasks"></i>	Задачи</a></li>
				<li><a href="#"><i class="fas fa-mobile-alt"></i>	Контакты</a></li>
				<li><a href="#"><i class="far fa-comments"></i>   Чат</a></li>
			</ul>
		</div>
	</nav>
	
	<section class="content-section">
		<div id="particles-js"></div>
		<div class="profile">
			<img class="ava" src="font/2.jpg" alt="">

		</div>	 
	</section>
	<section class="content-section"> </section>
	<section class="content-section"> </section>


	
    
	<script  src = " http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js" /defer></script>
	<script defer src="https://use.fontawesome.com/releases/v5.7.0/js/all.js" integrity="sha384-qD/MNBVMm3hVYCbRTSOW130+CWeRIKbpot9/gR1BHkd7sIct4QKhT1hOPd+2hO8K" crossorigin="anonymous" ></script>
	<script src="js/main.js" /defer></script>
	<script src="js/js.js" /defer></script>


</body>
</html>

CSS

*{
	padding: 0;
	margin: 0;
}
body{

}
/*Style Menu*/
.fix-menu{
	background: rgba(255, 255, 240, 0.22);
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 10;
}
.top-menu{
	width: 970px;
	margin: 0 auto;
}
.menu{
text-align: center;
}
.menu li {
	display: inline-block;  
}
.menu li a {
	display: inline-block;   /*Почему и тут надо задовать? */
	padding: 10px 15px;
}

ul, li {
	list-style-type: none;
}
a{
	color: inherit;          /*При удалении цвет у всех ссылок становится синей почему?*/
	text-decoration: none;
}


/*Style Section*/
.content-section{
	display: flex;
	min-height: 100vh;
	width: 100%;
	box-sizing: border-box;
}
  .content-section:nth-of-type(1) {
 	background-color: rgb(220, 20, 60);   
}

  .content-section:nth-of-type(2) {
 	background-color: rgb(150, 10, 100);    
}
  .content-section:nth-of-type(3) {
 	background-color: rgb(65, 200, 180);    
}





/*Style Clearfix*/
.clearfix::after{
	content: "";
	display: block;
	clear: both;
}




/*Style Particles */
#particles-js{
	position: absolute;
	top: 0;
    left: 0;
    width: 100%; /*Попробуйте удалить и посмотрите этот класс мешает мне или норм?*/
    height: 100%;
    z-index: 2;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}
.profile{
  width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.ava{
	display:relative;
	width: 250px;
	height: 250px;
 	z-index: 5;
 	border-radius: 50%;
 	box-shadow: 0 0 20px rgba(0,0,0,1); /* Параметры тени */
 }
 .avatar{}

/*
nav .wrapper {
	position: relative;
}
// Style Menu 
.menu a{
	text-decoration: none;
	display: inline-block;
	position: relative;
	color:black;
	padding: 15px 20px;
	font-size: 18px;
	transition: .3s linear;
}
.menu a.current, .menu a:hover{color: #fff;}
.menu a:before,
.menu a:after {
	content: "";
	position: absolute;
	height: 3px;
	top: auto;
	right: 50%;
	bottom: 0px;
	left: 50%;
	background: #fff;
	transition:...