JSFiddle - React, Tailwind, and code Playground

by DemonTut

HTML

<div id="header">Шапка</div>

<div id="cont_wrap">
  <div id="content">Контент</div>
</div>

<div id="menu">Меню</div>
<div id="sidebar">Сайдбар</div>
<div id="footer">Футер</div>

SCSS

body {
    color: #000; /* цвет текста страницы */
    background: #fff; /* фон */
    margin: 0; /* обнуление полей */
   }
   #header {
    height: 100px; /* высота шапки */
    background: #fc0; /* фон */
   }
   #cont_wrap {
    float: left; /* вспрытие обертки влево */
    width: 100%; /* ее ширина */
   }
   #content {
    height: 300px; /* высота контента */
    background: #eee; /* фон */
    margin: 0 200px 0 250px; /* боковые поля */
   }
   #menu {
    width: 250px; /* ширина меню */
    height: 300px; /* высота */
    background: #0fc; /* фон */
    float: left; /* всплытие влево */
    margin-left: -100%; /* левое отрицательное поле */
   }

   #sidebar {
    width: 200px; /* ширина сайдбара */
    height: 300px; /* высота */
    background: #c0f; /* фон */
    float: left; /* всплытие влево */
    margin-left: -200px; /* левое отрицательное поле */
   }
   #footer {
    height: 50px; /* высота футера */
    color: #fff; /* цвет текста */
    background: #000; /* фон */
    clear: both; /* прерываем обтекание  */
   }