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" />
		<title>{{ title }}</title>
	</head>
	<body>
		<header>
			<div class="hdr", id="lftimg">
        <img src="https://www.dropbox.com/home?preview=logo.png">
			</div>
			<div class="hdr", id="lft">
				<p>рэп и хип-хоп</p>
			</div>
			<div class="hdr", id="cntr">
				<a>ЛЕНТА</a>
				<a>ФОРУМ</a>
				<a>О ПРОЕКТЕ</a>
				<a>ДОНАТ</a>
			</div>
			<div class="hdr"; id="rght">
				<a color="">вход</a>
				<hr color="white">
				<a>регистрация</a>
			</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 * {
	border: 1px solid white;
}

header {
	display: flex;
	position: relative;
	background-color: #2D2D2F;
	width: 80%;
	margin-top:-0.5%;
	margin-left: 10%;
}

header a {
	text-decoration: none;
	color: white;
	background-color: #2D2D2F;
}

header p {
	background-color: #2D2D2F;
}

#lftimg{
	background-color: #2D2D2F;
	height: auto;
	width: 80%;
	max-width: 151px;
	margin-top: auto;
	margin-bottom: auto;
}

#lft { 
	width: 10%;
	height: auto;
	margin: auto;
}

#lft * {
	text-align: center;
}

#cntr {
	display: flex;
	border-right: 10px solid white; 
	border-left: 10px solid white;
	padding-bottom: 35px;
	padding-top: 35px;
	margin: auto;
	width: 60%;
	height: auto;
}

#cntr a{
	margin: 0 auto;
}

#rght { 
	line-height: 250%;
	text-align: center;
	overflow: hidden;
	margin: auto;
	margin-right: 0;
	padding-right: 2%;
	padding-left: 1%;
}

#rght * {
	margin: 0 auto;	
}

.hdr {
	display: inline-block;
	background-color: #2D2D2F;
	color: #FFFFFF;
	vertical-align: middle;
	font-size: 24px;
}

main {
	margin-left: 10%;
	width: 78%;
	background-color: #F1F2F1;
	font-size: 32px;
	padding-left: 1%;
	padding-right: 1%;
	height: 100%;
	min-height: 80vh;
	margin-top: -4vh;
	padding-top: 1vh;
}

main * {
	background-color: #F1F2F1;
}

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

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

#aa {
	margin-left: auto;
}