JSFiddle - React, Tailwind, and code Playground

by rus333

HTML

<!DOCTYPE HTML>
<html lang="ru-RU">
    <head>
        <meta charset="UTF-8">
        <title>Макет #1</title>
    </head>
    <body>
	<div class="wrap">
		<div class="left">
			<ul>
				<li><a href="#">Ссылка№1</a></li>
				<li><a href="#">Ссылка№2</a></li>
				<li><a href="#">Ссылка№3</a></li>
				<li><a href="#">Ссылка№4</a></li>
				<li><a href="#">Ссылка№5</a></li>
			</ul>
		</div>
		<div class="main">
			<p>С другой стороны постоянное информационно-пропагандистское обеспечение нашей деятельности обеспечивает широкому кругу (специалистов) участие в формировании дальнейших направлений развития. Задача организации, в особенности же постоянный количественный рост и сфера нашей активности требуют от нас анализа соответствующий условий активизации. С другой стороны укрепление и развитие структуры в значительной степени обуславливает создание модели развития. С другой стороны постоянный количественный рост и сфера нашей активности позволяет выполнять важные задания по разработке позиций, занимаемых участниками в отношении поставленных задач.</p>
			<p>С другой стороны постоянный количественный рост и сфера нашей активности влечет за собой процесс внедрения и модернизации позиций, занимаемых участниками в отношении поставленных задач. Равным образом реализация намеченных плановых заданий представляет собой интересный эксперимент проверки направлений прогрессивного развития. С другой стороны дальнейшее развитие различных форм деятельности требуют определения и уточнения новых предложений. Не следует, однако забывать, что начало повседневной работы по формированию позиции требуют от нас анализа модели развития. Значимость этих проблем настолько очевидна, что новая модель организационной деятельности требуют определения и уточнения позиций, занимаемых участниками в отношении поставленных задач. Задача организации, в особенности же постоянный количественный рост и сфера нашей активности позволяет оценить значение соответствующий условий активизации.</p>
			<p>Идейные...

CSS

@charset "utf-8";
html, body{
	margin: 0;
	padding: 0;
	font-family: Arial, Tahoma;
	color: #000;
	background: #ccc;
}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
*{
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.main p {
	color: #f8f8f8;
	font: normal 12px Verdana;
	padding: 5px;
}
.wrap {
	position: relative;
	width: 80%;
	min-height: 768px;
	height: 768px;
	max-width: 1024px;
	margin: 0 auto;
}
.left, .main, .right {
	background: #222;
}
@media screen and (min-width: 1024px) {
	.left, .main, .right {
		float: left;
	}
	.left {
		width: 18%;
		margin: 0 2% 0 0;
		height: 100%;
	}
	.left ul {
		width: 90%;
		margin: 0 2%;
		float: left;
	}
	.left ul li {
		margin: 5px 0;
	}
	.left ul li a {
		color: #252525;
		background: #f8f8f8;
		font: normal 12px Verdana;
		display: block;
		height: 20px;
		line-height: 15px;
		text-decoration: none;
	}
	.left ul li a:hover {
		color: #f8f8f8;
		background: #252525;
		text-decoration: none;
	}
	.main {
		width: 58%;
		margin: 0 2% 0 0;
		height: auto;
	}
	.right {
		width: 18%;
		margin: 0;
		height: 100%;
	}
	.right ul {
		width: 90%;
		margin: 0 2%;
		float: right;
	}
	.right ul li {
		margin: 5px 0;
	}
	.right ul li a {
		color: #252525;
		background: #f8f8f8;
		font: normal 12px Verdana;
		display: block;
		height: 20px;
		line-height: 15px;
		text-decoration: none;
	}
	.right ul li a:hover {
		color: #f8f8f8;
		background: #252525;
		text-decoration: none;
	}
}
@media screen and (max-width: 1024px) and (min-width: 480px) {
	.left {
		width: 18%;
		height: 93%;
		margin: 0 2% 2% 0;
		float: left;
	}
	.left ul {
		width: 90%;
		margin: 0 2%;
		float: left;
	}
	.left ul li {
		margin: 5px 0;
	}
	.left ul li a {
		color: #252525;
		background: #f8f8f8;
		font: normal 12px Verdana;
		display: block;
		height: 20px;
		line-height: 15px;
		text-decoration: none;
	}
	.left ul li a:hover {
		color:...