JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>InfoCraft</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper clearfix">
	<div class="header-menu">
	
	<div class="logo"></div>

	<div class="Name">InfoCraft</div>
		
		<ul class="main-menu">
			
			<li class="lim"><a href="" id="main">Главная</a></li>
			<li class="lim"><a href="">Как начать?</a></li>
			<li class="lim"><a href="">Новости</a></li>
			<li class="lim"><a href="https://vk.com/donatinfocraft" target="_blank">Донат</a></li>

		</ul>

	</div>
	<div class="aboutus">
		
		<div class="aboutus-text"><p>Приветствуем вас на InfoCraft!</p></div>
		


	</div>
	<div class="column1">

	<p class="p">О нас</p>

	<p class="p1">Мы новый, относительно недавно открывшийся сервер для Minecraft PE. На нашем сервере вы можете приятно провести время.</p>

	</div>
	<div class="column2">

	<p class="p2">Как начать?</p>

	<p class="p1">Для того, чтобы начать играть на нашем сервере нажмите <a href="HowBegin.html" class="a">сюда</a>.</p>

	</div>
		
	<div class="right">&copy InfoCraft.pe.hu 2017</div>
</div>
</body>
</html>

CSS

html {
	margin: 0;
	padding: 0;
	background: url("../img/TEMA2.jpg") no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
}


body {
	font-family: Georgia;
	padding: 0;
	margin: 0;

}



.wrapper {
	width: 100%;
	position: relative;
	height: 100%;
}


.clearfix {
	content: "";
	clear: both;
	display: table;
}


.header-menu {
	width: 100%;
	background-color: white;
	position: relative;
	margin-bottom: 0px;
}


.logo {
	background-image: url("../img/spider.png");
	position: absolute;
	left: 10px;
	top: 13px;
	width: 48px;
	height: 48px;
}


.Name {
	color: #696969;
	font-size: 45px;
	font-weight: bold;
	font-family: Arial;
	float: left;
	margin-right: 30px;
	margin-top: 10px;
	margin-left: 70px;

}


.main-menu {
	width: 1200px;
	margin: 0;
	padding: 0;
}


.main-menu  li {
	display: inline-block;
}


.main-menu  li  a {
	text-decoration: none;
	display: block;
	padding: 27px 15px 23px;
	color: #CACACA;
}


.main-menu a:hover {
	border-bottom: 5px solid red;
	color: black;
}


#main {
	border-bottom: 5px solid #3AE2EE;
	color: black;
}


.aboutus {
	width: 900px;
	margin-left: 0px;
	padding: 0;
	position: relative;
	height: 100px;
	background-color: #0182CD;
	opacity: 0.7;
	margin-top: 50px;
}


.aboutus-text {
	font-size: 50px;
	color: white;
	position: absolute;
	top: -30px;
	left: 70px;
	
}


.column1 {
	width: 450px;
	height: 400px;
	background-color: red;
	opacity: 0.7;
	float: left;
	box-sizing: border-box;
}


.p {
	padding-left: 180px;
	font-size: 30px;
	color: white;
}


.p1 {
	color: white;
	padding: 0px 5px;
	text-indent: 15px;
}


.p2 {
	padding-left: 160px;
	font-size: 30px;
	color: white;
}


.column2 {
	width: 450px;
	height: 400px;
	background-color: black;
	opacity: 0.7;
	float: left;
	box-sizing: border-box;
}


.a {
	text-decoration: none;

}


.a:link {
	color: red;
}


.a:hover {
	color: white;
}


.a:active {
	color: orange;
}


.right {
	color: white;
	position: absolute;
	bottom: 10px;
	right:...