JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Верстк</title>
</head>

<body id="body">
<div class="head-wrap">
<div class="bg-menu">
<ul>
<li><a href="/">ссылка</a></li>
<li><a href="/">ссылка</a></li>
<li><a href="/">ссылка</a></li>
</ul>
</div>



<div class="inform-bgleft">
</div>
<div class="bg-logo"><a href="/" title="Название логотипа"><img src="/designs_sv/logo.png" class="logo" alt="Описание картинки для поисковиков"></a></div>
<div class="inform-bgright">
</div>


<div class="container-left">
sadasdasda
</div>
<div class="bg-ops">
Тут текст
</div>
<div class="content">
<div class="bg-vm">
<div class="bg-title"><a href="/" class="title-vm">Название материала</a>
<div class="autor">АВТОР: DUGGES / Дата: 24.24.24</div>
</div>


</div>
</div>



<div class="container-right">
</div>

<div class="foot-bg">$POWERED_BY$</div>

</div>
</body>
</html>

CSS

body {margin:0px; padding:0px; font-family:tahoma; font-size:11px; background:#044f6e; color:#3ec7ff;}

a:link,
a:active,
a:visited {color:#177bb7; text-decoration:underline;}
a:hover {text-decoration:none;}

h1,h2,h3,h4,h5,h6 {display:block; margin:0 0 10px 0; padding:0; color:#177bb7;}

h1 {font-size:22px;}
h2 {font-size:20px;}
h3 {font-size:18px;}
h4 {font-size:16px;}
h5 {font-size:14px;}
h6 {font-size:12px;}



.head-wrap {min-widht:1200px; margin:0 auto; width:1170px; max-widht:1200px; background-size:cover;}


/* Горизонтальное меню */
.bg-menu {width:1170px; height:42px; background:url(http://jur-cub.ru/designs_sv/bg-gor.png) no-repeat;}
.bg-menu ul {margin:0px; padding;0px; clear:both;}
.bg-menu ul li {list-style:none; float:left;}
.bg-menu ul li a {background:url(http://jur-cub.ru/designs_sv/bg-menu-link.png) no-repeat; width:94px; height:43px; text-decoration:none; color:#666666;}
.bg-menu ul li a:hover {background:url(http://jur-cub.ru/designs_sv/bg-menu-hover.png) no-repeat; width:94px; height:43px; color:#FFFFFF;}
/* Конец меню */

/* Шапка */
.inform-bgleft {background:url(http://jur-cub.ru/designs_sv/inform-leftbg.png) no-repeat; width:315px; height:176px; margin-left:2px; margin-top:10px; float:left;}

.bg-logo {background:url(http://jur-cub.ru/designs_sv/bg-logo.png) no-repeat; width:534px; height:175px; float:left; margin-top:10px;}
.logo {padding-left:45px; padding-top:40px;}

.inform-bgright {background:url(http://jur-cub.ru/designs_sv/inform-rightbg.png) no-repeat; width:315px; height:176px; margin-top:10px; float:left;}

/* Конец Шапки */


/* Container */

.container-left {background:url(http://jur-cub.ru/designs_sv/bg-container-left.png) no-repeat; width:234px; height:1161px; float:left; margin-top:10px;}

.bg-ops {background:url(http://jur-cub.ru/designs_sv/bg-ops.png) no-repeat; width:680px; height:281px; float:left; margin-top:10px; margin-left:10px; margin-right:10px;}

.container-right...