JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head></head>
    <body>
        <!-- Always on top: Position Fixed-->
        <header>
            header
        </header>
        <!-- Fixed size after header-->
        <div class="content">
            <!-- Always on top. Fixed position, fixed width, relative to content width-->
            <div class="sidebar1">
                sidebar-left
            </div>
            <!-- Scrollable div with main content -->
            <div id="scrollable2">
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
            </div>
            <!-- Always on top. Fixed position, fixed width, relative to content width -->
            <div class="sidebar2">
                sidebar-right
            </div>
        </div>
        <!-- Always at the end of the page -->
        <footer>
            footer
        </footer>
    </body>
</html>

CSS

header{
    width: 100%;
    background: yellow;
    position: fixed; 
    top: 0;
    height: 60px !important;
}

.content {
  margin-top: 60px;
  background: pink;
  height: 100%;
  width: 500px;
}

.sidebar1, .sidebar2 {
  background: red;
  width: 100px;
  height: 100%;
  top: 60px;
  position:fixed;
}

.sidebar1 {
    
  left:0;

}

.sidebar2 {
  right: 0;
}

#scrollable2 {
  background:green;
  height: 100%;
  min-width: 300px;
  margin-left: 100px;
  margin-right: 100px;
}

footer {
    width: 100%;
    background: yellow;
    position: fixed; 
    bottom: 0;
    height: 30px;
}