JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/main.css">
	<title>Document</title>
</head>
<body>
	<section class="header">
		<div class="container">
			<div class="heading clearfix">
				<div class="logo">
					<div class="lighter">My</div> portfolio 
				</div>
				<ul class="menu">
					<li class="menu__item">
						Обо мне
					</li>
					<li class="menu__item">
						Навыки
					</li>
					<li class="menu__item">
						Работы
					</li>
				</ul>
				<p class="mail">
					info@myname.com
				</p>
			</div>
			<div class="main-heading">
				<h1>
					Дело, которым я живу
				</h1>
				<h2>
					Верстка и frontend 
				</h2>
			</div>
			<img src="page/arrow.png" alt="Стрелочка" class="arrow">
		</div>
	</section>
	<section class="about-me">
		<div class="container">
			<h3>
				Обо мне
			</h3>
			<div class="clearfix">
				<div class="description">
					<div class="information">
						Бэкграунд
					</div>
					<div class="description__item">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.
					</div>
					<div class="description__item">
							Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.
					</div>
					<div class="description__item">
							Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa quiis aute irure dolor in reprehenderit in is aute irure dolor in reprehenderit in is aute irure dolor in reprehenderit in.
					</div>
				</div>
				<div class="merit">
					<div class="information">
						Заслуги
					</div>
					<div...

CSS

@font-face {
			font-family: "MuseoSansRegular";
			src: url("../fonts/MuseoSansRegular/MuseoSansRegular.eot");
			src: url("../fonts/MuseoSansRegular/MuseoSansRegular.eot?#iefix")format("embedded-opentype"),
			url("../fonts/MuseoSansRegular/MuseoSansRegular.woff") format("woff"),
			url("../fonts/MuseoSansRegular/MuseoSansRegular.ttf") format("truetype");
			font-style: normal;
			font-weight: normal;
	}

	@font-face {
			font-family: "MuseoSansBold";
			src: url("../fonts/MuseoSansBold/MuseoSansBold.eot");
			src: url("../fonts/MuseoSansBold/MuseoSansBold.eot?#iefix")format("embedded-opentype"),
			url("../fonts/MuseoSansBold/MuseoSansBold.woff") format("woff"),
			url("../fonts/MuseoSansBold/MuseoSansBold.ttf") format("truetype");
			font-style: normal;
			font-weight: normal;
	}

	@font-face {
			font-family: "MuseoSansItalic";
			src: url("../fonts/MuseoSansItalic/MuseoSansItalic.eot");
			src: url("../fonts/MuseoSansItalic/MuseoSansItalic.eot?#iefix")format("embedded-opentype"),
			url("../fonts/MuseoSansItalic/MuseoSansItalic.woff") format("woff"),
			url("../fonts/MuseoSansItalic/MuseoSansItalic.ttf") format("truetype");
			font-style: normal;
			font-weight: normal;
	}

	@font-face {
			font-family: "MuseoSansLight";
			src: url("../fonts/MuseoSansLight/MuseoSansLight.eot");
			src: url("../fonts/MuseoSansLight/MuseoSansLight.eot?#iefix")format("embedded-opentype"),
			url("../fonts/MuseoSansLight/MuseoSansLight.woff") format("woff"),
			url("../fonts/MuseoSansLight/MuseoSansLight.ttf") format("truetype");
			font-style: normal;
			font-weight: normal;
	}

	@font-face {
			font-family: "MuseoSansMedium";
			src: url("../fonts/MuseoSansMedium/MuseoSansMedium.eot");
			src: url("../fonts/MuseoSansMedium/MuseoSansMedium.eot?#iefix")format("embedded-opentype"),
			url("../fonts/MuseoSansMedium/MuseoSansMedium.woff") format("woff"),
			url("../fonts/MuseoSansMedium/MuseoSansMedium.ttf") format("truetype");
			font-style: normal;
			font-weight:...