JSFiddle - React, Tailwind, and code Playground

by 3ch0

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Колесов</title>
	<meta charset="utf-8">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta name="format-detection" content="telephone=no">

	<link type="text/css" rel="stylesheet" href="css/styles.css">
	<!--<script type="text/javascript" src="js/scripts.js"></script> -->

</head>
<body>
	<div class ="resize">
		<div class ="header">
			<div class ="container clearfix">
				<div class ="up_line">
					<img src="img/pryamougol.jpg" alt="вернее поле"><br>
				</div>
				<div class ="logo">
					<img src="img/ship.jpg" alt="теплоход"><br>
				</div>

				<div class ="header_left_text">
					<title>Банкетний теплоход</title>

					<span class="bTeploxod">
						<p>Банкетний Теплоход</p>
					</span>

					<span class="Kolesov">
						<p>КолесовЪ</p>
					</span>

					<span class="off_site">
						<p>официальный сайт</p>
					</span>
				</div>

				<div class ="header_right_text">
					<span class="telephone">
						<p>+7 (495) 744-000-6</p>
					</span>
					<span class="worck_graf">
						<p>работаем 24 часа 7 дней в неделю</p>
					</span>
				</div>
			</div>

		</div>

		<div class ="content">

			<div class ="content_img_panorama">
				<img src="img/panorama.jpg" alt="панорама"><br>
			</div>

			<div class ="content_right_text">
				<div class ="nav_menu_back_img">
					<img src="img/pryamougol1.jpg" alt="nav_menu_back_img"><br>
				</div>
				<div class ="nav_menu_title">
					<p>Банкетный теплоход КолесовЪ</p>
				</div>
				<div class ="nav_menu">
					<ul>
						<li><a href=#>О ТЕПЛОХОДЕ КОЛЕСОВЪ</a></li>
						<li><a href=#>ЦЕНЫ ТЕПЛОХОД КОЛЕСОВ</a></li>
						<li><a href=#>ГАЛЕРЕЯ</a></li>
						<li><a href=#>ЕСТОРАН ТЕПЛОХОДА КОЛЕСОВ</a></li>
						<li><a href=#>КОНТАКТЫ</a></li>
					</ul>
				</div>
			</div>

			<div class ="content_left_text">
				<div class ="about">
					<p>О теплоходе КолесовЪ</p>
				</div>
				<div class ="about_text">
					<p>Новейший колёсный банкетный...

CSS

html { margin:0; padding:0;}
body { margin:0; padding:0; color:#666; font:normal 18px/28px Helvetice, Arial, sans-serif; background:#fff;}
.clear { clear:both;}
p { margin:0; padding:10px 0;}
a { color:#0000ff; text-decoration:underline;}
a:hover { color:#7777ff;}
a img { border:none;}
h1, h2, h3, h4, h5, h6 { margin:0; padding:0; font-weight:bold; color:#000;}
h1 { padding:40px 0 24px; line-height:1.4em;}
h2 { padding:0 0 12px;}
strong { font-weight:bold;}
em { font-style:italic;}
form, menu, iframe { display:block; margin:0; padding:0; border:none;}
ol, ul, dl, li, dt, dd { margin:0; padding:0; list-style:none;}
* { outline:none;}

body 
{
	background-image: url('../img/background.jpg');
}

.clearfix:before, .clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {clear: both;}
.left {float: left;}
.right {float: right;}

.resize  {
	background-image: url("../img/background_in.jpg");
	top: 25px;
	width: 960px;
	height: 890px;
	padding: 20;
	margin: auto;
}
.header {
	left: 0;
	right: 0;
	width: 960px;
	height: 200px;
}
.container {
	position: absolute;
	width: 960;
	height: 200px;
	margin: 0 auto;
}
.up_line1 {
	border-radius: 5px;
	background-color: rgb(2, 56, 117);
	width: 960px;
	height: 42px;
}
.logo {
	position: absolute;
	left: 270px;
	top: 65px;
}
.header_left_text {
	position: absolute;
	left: 20px;
	top: 60px;
	width: 240px;
	height: 140px;
	}
.Kolesov, .bTeploxod, .telephone{
	font-family: "Arial";
	color: rgb(2, 56, 117);
}
.bTeploxod {
	font-size: 24px;
	line-height: 0.3;
	}
.Kolesov {
	font-size: 48px;
	line-height: 1.15;
	}
.off_site {
	font-family: "Arial";
	font-size: 13px;
	color: rgb(48, 48, 48);
	line-height: 0.554;
	}
.header_right_text{
	position: absolute;
	left: 720px;
	top: 60px;
	width: 240px;
	height: 140px;
}
.telephone{	
	font-size: 24px;
	line-height: 0.3;
}
.worck_graf{
	font-family: "Arial";
	font-size: 13px;
	color: rgb(48, 48, 48);
	line-height: 0.554;
}

.content{
	width: 960px;
	height: 650px;
	position:...