JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
</head>

<body>
	<header>
        <aside class="left"></aside>
        <div class="headerWrapper">
            <nav>                
                <a href="index.html" class="nav">Главная</a>
                <a href="index.html" class="nav feedback">Обратная связь</a>
            </nav>
        </div>
        <aside class="right"></aside>
	</header>
    
    <section class="main">
        <aside class="left">
            <svg version="1.1" class="f2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                 viewBox="0 0 91.093 390.595" style="enable-background:new 0 0 91.093 390.595;" xml:space="preserve">
            <g>
                <path style="fill:none;" d="M10,67.304v257.21C66.99,248.584,66.95,143.184,10,67.304z"/>
                <path style="fill:#F9C802;stroke:#F9C802;stroke-width:20;stroke-miterlimit:10;" d="M10,24.124v43.18
                    c56.95,75.88,56.99,181.28,0,257.21v43.15c0.14-0.13,0.28-0.26,0.42-0.4C104.83,272.494,104.61,118.634,10,24.124z"/>
            </g>
            </svg>
            
            <svg version="1.1" class="f7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                 viewBox="0 0 55 177.944" enable-background="new 0 0 55 177.944" xml:space="preserve">
            <g>
                <defs>
                    <rect id="f7r1" width="55" height="177.944"/>
                </defs>
                <clipPath id="f7r2">
                    <use xlink:href="#f7r1"  overflow="visible"/>
                </clipPath>
                
                    <path clip-path="url(#f7r2)" fill="none" stroke="#E7663C" stroke-width="20" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
                   ...

CSS

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    justify-content: space-between;
}

aside {
    flex: 1;
    position: relative;
}

header {
    display: flex;
    border: 1px solid red;
}

header aside {
    position: relative;
}


header .headerWrapper {
    flex: 5;
    position: relative;
    padding: 5px 16px;
}

.main {
    display: flex;
    flex-direction: row;
    flex: 1;
}

.main .content {
    flex: 5;
    margin: 0 auto 0px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0px 16px;
    border: 1px solid black;
    
    height: 1500px;
}

footer {
    display: flex;
    height: 10vh;
    border: 1px solid green;
}

footer .footer-bottom-wrap {
    flex: 5;
    margin-top: 5vh;
}

.f85 {
    position: absolute;
    width: 90%;
}

.f7 {
    position: absolute;
    width: 50%;
    left: 0;
    bottom: 10%;
}

.f2 {
    width: 50%;
    position: absolute;
    top: 190px;
}

.f9 {
    position: absolute;
    width: 100%;
    top: 0;    
}

.f5 {
    position: absolute;
    width: 60%;
    right: 0;
    top: 10%;
}

.f3 {
    width: 65%;
    position: absolute;
    right: 0;
    bottom: 0;
    top: 40%;
}

.f11 {
    width: 50%;
    position: absolute;
    bottom: 5vh;
    right: 0;
}