JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div class="container">
        <div class="header"><h1>Шапка</h1></div>
        <div class="leftContainer"><h2>Левый бар</h2></div>
        <div class="content"><h3>Контент</h3></div>
        <div class="rightContainer"><h2>правый бар</h2></div>
    </div>
</div>

CSS

body,
#wrapper{
    width: 100%;
    margin: 0;
}
.container{
    width:500px;
    height:2000px;
    border:2px solid #000;
    margin: 0 auto;
    position: relative;
    padding-top: 85px;
}
.header{
    width: 498px;
    height: 80px;
    border: 1px dashed blue;
    position: fixed;
    top: 0;
}
.leftContainer{
    width:100px;
    height:300px;
    position: fixed;
    border:1px solid #ff00ff;
    left: calc((100% - 500px) / 2);
    top: 85px;
}
.rightContainer{
    width:100px;
    height:300px;
    position: fixed;
    border:1px solid #ccc;
    right: calc((100% - 500px) / 2);
    top: 85px;
}
.content{
    width:290px;
    margin:auto;
    border: 2px solid orange;
}