JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
    <title>Блочная верстка</title>
</head>
<body>
	<div class="main">
		<div class="bl f1"><b>ШАПКА 1 </b></div>
        <div class="bl f2"><b>ШАПКА 2 </b></div>
        <div class="bl f3"><b>НАВИГАЦИЯ </b></div>
        <div class="bl f4">
            <div class="bl f4_1"><b>ЛЕВЫЙ САЙТБАР 1 </b></div>
            <div class="bl f4_2"><b>ЛЕВЫЙ САЙТБАР 2 </b></div>
        </div>
        <div class="bl f5"><b>КОНТЕНТ </b></div>
        <div class="bl f6"><b>ПРАВЫЙ САЙТБАР 1 </b></div>
        <div class="bl f7"><b>ЛЕВЫЙ САЙТБАР 3 </b></div>
        <div class="bl f8"><b>КОНТЕНТ 2 </b></div>
        <div class="bl f9"><b>ПРАВЫЙ САЙТБАР 2 </b></div>
        <div class="bl f10"><b>ПОДВАЛ </b></div>

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

CSS

body {width:1000px; margin: auto; }


.bl {text-align: center; }

.f1 {background: #95d232; float: left; width: 50%; height: 50px;} /*шапка1*/
.f2 {background: #00fc60; float: right; width: 50%; height: 50px;} /*шапка2*/
.f3 {background: #0f9241; float: left; width: 100%; height: 25px;} /*навигация*/
.f4 {background: #3b443e; float: left; width: 30%; height: 250px;} /*контейнер для левого сайтбара 1,2*/
.f4_1 {background: #3b443e; height: 125px;} /*левый сайтбар 1*/
.f4_2 {background: #575a58; height: 125px;} /*левый сайтбар 2*/
.f5 {background: #818683; float: left; width: 40%; height: 250px;} /*контент 1*/
.f6 {background: #a2a7a4; float: left; width: 30%; height: 250px;} /*правый сайтбар 1*/
.f7 {background: #596b5f; float: left; width: 30%; height: 130px;} /*левый сайтбар 3*/
.f8 {background: #edfff2; float: left; width: 40%; height: 130px;} /*контент 2*/
.f9 {background: #abe4bb; float: left; width: 30%; height: 130px;} /*правый сайтбар 2*/
.f10 {background: #0f9241; float: left; width: 100%; height: 25px;} /*подвал*/