JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>


<head>
<title>сайт</title>

<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"> 
</head>

<body>

<!-- ******************** ШАПКА ************************************************ -->
<div id="header">

  <div id="header_center">
  Верхушка
  </div>

</div>
<!-- ******************** ШАПКА КОНЕЦ ******************************************* -->



<!--  *********** КОНТЕНТ ******************************************************** -->
<div class="main">
<div class="main_container">




<!--  ***********  МЕНЮ ЛЕВАЯ КОЛОНКА ************************ -->
<div class="main_left">
  <div class="registration" >

  </div>
  
  <!--  ***********  ГЛАВНОЕ МЕНЮ ****************** -->
<div id="sidebar">
<IMG id="sidebar" SRC="img/menu_edu.png" alt="" /><br/>

<ul id="sidebar">

<li class=""><a class="" href="" title="">ПУНКТ<a/></li>
<li class=""><a class="" href="" title="">ПУНКТ<a/></li>
<li class=""><a class="" href="" title="">ПУНКТ<a/></li>
<li class=""><a class="" href="" title="">ПУНКТ<a/></li>

<ul/>


</div>
<!--  ***********  ГЛАВНОЕ МЕНЮ КОНЕЦ ****************** -->

</div>
<!--  ***********  МЕНЮ ЛЕВАЯ КОЛОНКА КОНЕЦ ***************** -->





<!--  ***********  ЦЕНТРАЛЬНАЯ КОЛОНКА КОНЕЦ ***************** -->
<div class="main_center">
Центр
</div>
<!--  ***********  ЦЕНТРАЛЬНАЯ КОЛОНКА КОНЕЦ ***************** -->




<!--  ***********  ПРАВАЯ КОЛОНКА РЕКЛАМА **************************************** -->
<div class="main_right">
Правая
</div>
<!--  ***********  ПРАВАЯ КОЛОНКА РЕКЛАМА КОНЕЦ ************************************* -->




</div>
</div>
<!--  *********** КОНТЕНТ КОНЕЦ ***************************************************** -->

<!--  *********** ПОДВАЛ *********************************************************** -->
<div...

CSS

body {
margin: 0; 
padding: 0;

background-image: url(/img/back_pixel.png);
}

/* ---------------------- ОБЩАЯ СТРУКТУРА РАЗМЕТКИ -------------------- */

/* ------------------ ШАПКА ПОД ФЛЕШ --------------- */
#header {
   width: 100%;
   height: 530px;
   background: #000;
   margin: 0 auto;

   }
   
#header_center {
   width: 1160px;
   height: 530px;
   background: #999;
   margin: 0 auto;

   text-align: center;

   border: 1px solid;
   border-color: #fff;
   }
/* ------------------ ШАПКА ПОД ФЛЕШ. КОНЕЦ --------------- */




/* ------------------ КОНТЕНТ --------------- */

/* Главная область */
.main {
   width: 100%;
   height: %;

   margin: 0 auto;
   
   text-align: center;
   
   background-image: url(/img/back_gradient.png);
   background-position: center 0;
   background-repeat: repeat-y;
   }

.main_container {
margin: 0 auto;
width: 1166px;
overflow: auto;

border: 1px solid;
border-color: #fff;

   background-image: url(/img/back_main.png);
   background-position: center 0;
   background-repeat: repeat-y;
}


/* Левая колонка */
.main_left {
width: 268px;
height: %;
float: left;

text-align: center;

border: 1px solid;
border-color: #ff0000;
}

/* Центральная колонка */
.main_center {
width: 690px;
height: %;
float: left;
background: #fff;

border: 1px solid;
border-color: #000;

}

/* Правая колонка */
.main_right {
width: 180px;
height: %;
float: right;


border: 1px solid;
border-color: #000;

}

/* ------------------ КОНТЕНТ. КОНЕЦ --------------- */

/* ------------------ ПОДВАЛ --------------- */
/* Подвал */
.footer {
   width: 100%;
   height: 80px;
   margin: 0 auto;

   text-align: center;

   border: 0px solid;
   border-color: #fff;
   }


/* Подвал центр */
.footer_content {
width: 1160px;
height: 80px;
margin: 0 auto;

background-image: url(/img/back_footer.png);
text-align: center;

border: 1px solid;
border-color: #999;

}
/* ------------------ ПОДВАЛ. КОНЕЦ --------------- */


/* ---------------------- ОБЩАЯ СТРУКТУРА...