JSFiddle - React, Tailwind, and code Playground

by dancool_5

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8; width=1200" />
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap-grid.min.css">
		<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}" />
		<title>{{ title }}</title>
	</head>
	<body>
		<header>
			  <div class="row">
				<div class="col-md-auto">
				  <img src="{{ url_for('static', filename='images/logo.png') }}" class="img-fluid"/>
				</div>
				<div class="col-md-auto">
				  <p>pih-poh.online</p>
				  <hr />
				  <p>рэп и хип-хоп</p>
				</div>
				<div class="col-md-auto cntr">
					<div class="col-md-auto">
						<p>ЛЕНТА</p>
					</div>
					<div class="col-md-auto">
						<p>ФОРУМ</p>
					</div>
					<div class="col-md-auto">
						<p>О ПРОЕКТЕ</p>
					</div>
					<div class="col-md-auto">
						<p>ДОНАТ</p>
					</div>
				</div>
				<div class="col-md-auto">
				  <p>вход</p>
				  <hr />
				  <p>регистрация</p>
				</div>
			  </div>
		</header>
		<main>
			<h1>Сайт</h1>
			{% block content %}{% endblock %}
		</main>
	</body>
	<footer>
		<p>©Copyright by , 2020</p>
		<p id="aa">Контакты: [email protected]</p>
	</footer>
</html>

CSS

*{
	background-color: #FAFD7D;
}

header {
	background-color: #2D2D2F;
	width: 80%;
	margin-left: 10%;

}


main {
	margin-left: 10%;
	width: 80%;
	background-color: #F1F2F1;
	min-height: 70vh;
}

main * {
	background-color: #F1F2F1;
}

header .row {
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	display: flex;
	background-color: #2D2D2F;
}

header .row * {
	background-color: #2D2D2F;
}

header * {
	text-align: center;
	color: white;
	font-size: 18px;
}

.img-fluid {
	padding-bottom: -1%;
}

.cntr {
	border-left: 10px solid white;
	border-right: 10px solid white;
	margin: auto;
}

.cntr *{
	background-color: #2D2D2F;
	color: white;
	display: inline-block;
}

footer {
	display: flex;
	width: 80%;
	margin-left: 10%;
	background-color: #2D2D2F;
	padding: 1%;
}

footer * {
	display: inline-block;
	color: white;
	background-color: #2D2D2F;
	font-size: 20px;
}

#aa {
	margin-left: auto;
}