JSFiddle - React, Tailwind, and code Playground

by Denis

HTML

<div id="grey"></div>
<div id="orange"></div>
<div id="main_block">main_block</div>

CSS

#grey {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: #CCC;
}
#orange {
    position: fixed;
    top: 50px;
    right: 0;
    width: 100px;
    height: 100%;
    background: #FFA500;
}
#main_block {
    position: absolute;
    top: 100px;
    left: 50%;
    margin-left: -253px; /* делаем поправку на бордеры и т.д. */
    width: 400px;
    height: 300px;
    border: 3px solid #7FFF00;
}