JSFiddle - React, Tailwind, and code Playground

by Denis

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>nameproject.Ru</title>

	<!-- CSS -->
	<link rel="stylesheet" type="text/css" href="css/nameproject.css">
	<link rel="stylesheet" type="text/css" href="css/animate.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">



	<!-- Fonts -->
	<link href='https://fonts.googleapis.com/css?family=Roboto:400,900,700,500&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
</head>
<body>
		<section class='rz_section1'>
			<div id='topmenu'>
					<a class='logo' href='/'></a>
					<a href='/'><button class='button button--rz button--round-l button--text-thick lk'>Личный кабинет</button></a>
						<nav>
							<ul>
								<li><a href='http://forum.asterios-rpg.com'>Главная</a></li>
								<li><a href='#cat1' class='scrollto'>Форум</a></li>
								<li><a href='#cat2' class='scrollto'>Услуги</a></li>
								<li><a href='#cat3' class='scrollto'>Правила</a></li>
								<li><a href='#cat3' class='scrollto'>Банлист</a></li>
								<li><a href='#cat4' class='scrollto'>Контакты</a></li>
							</ul>
						</nav>
		</div>
						<div class='content wrapper animated fadeIn'>
							<h1>Добро пожаловать</h1>
							<h2>на рускоязычный игровой проект</h2>
							<div class="logo_head"></div>
					</div>
	</section>
	<section class='rz_section2'>
		<div class='wrapper '>
			<div class='solider'></div>
			<span class='h_class'><b>О проекте</b></span>
			<div class='back'>
				<div class='back_text'>Проект <span style='color: #ffae00;'>nameproject</span> представляет большой выбор игровых серверов в серии игр Counter-Strike.<br>Вы можете замечательно провести время на наших серверах, найти новых друзей, в этом вам помогут множество разнообразных режимов, в которых не составит труда разобраться.<br>Каждый сервер имеет свой уникальный мод, который частично или полностью изменяет режим игры. Все моды сделаны исключительно профессионалами своего дела, что...

CSS

body {
    overflow-x: hidden;
    max-width: 1920px;
    min-height: 100%;
    min-width: 1200px;
    width: 100%;
    word-wrap: break-word;
    margin: 0;
}
a {
    color: #FFF;
    text-decoration: none;
    cursor: pointer;
}
a:hover {
    color: #ffae00;
}
.rz_section1 {
    background: url('/img/shadow.png'), url("/img/bg.png");
    background-position: center;
    height: 599px;
    min-width: 1200px;
    width: 100%;
    overflow-x: hidden;
}
#topmenu {
    width: 1200px;
    height: 60px;
    margin: 0 auto;
}
.logo {
    background: url('/img/logo.png');
    width: 263px;
    height: 96px;
    position: absolute;
}
nav {
    position: relative;
}
nav ul > li a,
.fw ul > li a,
.date {
    font-weight: 500;
}
nav ul > li a,
.fw ul > li a,
button {
    text-transform: uppercase;
}
nav {
    color: #FFF;
    float: right;
    padding-right: 8%;
}
nav ul > li {
    float: left;
    margin: 15px 19px;
    position: relative;
    list-style: none;
    text-align: center;
}
nav ul > li a {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
}
.wrapper {
    width: 1200px;
    margin: 0 auto;
}
.content h1 {
    font-size: 93px;
    font-family: "Roboto";
    color: rgb(255, 174, 0);
    text-transform: uppercase;
    line-height: 1.2;
    text-align: center;
    margin-bottom: -32px;
    text-shadow: 0px 2px 3px rgba(31, 31, 31, 1);
    -moz-transform: matrix( 0.81797783287094,0,0,0.81811387576071,0,0);
    -webkit-transform: matrix( 0.81797783287094,0,0,0.81811387576071,0,0);
    -ms-transform: matrix( 0.81797783287094,0,0,0.81811387576071,0,0);
}
.content h2 {
    font-size: 30.282px;
    font-family: "Roboto";
    color: rgb(255, 174, 0);
    text-transform: uppercase;
    line-height: 1.2;
    text-align: center;
    margin-bottom: -5%;
    text-shadow: 0px 1px 2px rgba(31, 31, 31, 1);
    -moz-transform: matrix( 1.38675348817001,0,0,1.38698412761322,0,0);
    -webkit-transform: matrix( 1.38675348817001,0,0,1.38698412761322,0,0);
    -ms-transform:...