JSFiddle - React, Tailwind, and code Playground

by JIMMY PHONG

HTML

<body>
    <div class="fixed-top">
          <ul>
             top menu ....
          </ul>
          <div class="fixed-right">
            <ul>
               right menu .....
            </ul>
          </div>   
    </div>
     <div class="main-content">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non facilisis turpis. Aliquam metus neque, interdum a felis sit amet, vehicula convallis augue. Suspendisse consequat, est quis hendrerit vehicula, nisl nulla consectetur erat, et auctor sem mi ac velit. Quisque cursus diam id est dapibus commodo. Pellentesque ultrices pretium nisi, in lacinia leo convallis et. Cras eu vestibulum turpis, non auctor quam. In ac mi placerat, eleifend quam nec, iaculis urna. Vestibulum pharetra sit amet metus nec pretium. Praesent et ante mauris. Quisque condimentum ante in elit mattis, et venenatis massa cursus. Fusce vitae nisl volutpat, tempor risus eu, facilisis quam. Mauris vitae condimentum lacus. Duis eget dolor in magna vestibulum vehicula.</p> 
<p>Sed pulvinar, massa et sagittis dignissim, lacus lacus finibus eros, sed dictum velit est a lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque semper eros vel sapien hendrerit, eu suscipit orci feugiat. Suspendisse aliquam lorem at molestie facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean sit amet sollicitudin urna. Praesent ullamcorper nibh ut semper pellentesque. Morbi quis dapibus lorem. Pellentesque pulvinar felis in ipsum mollis tristique. Fusce pellentesque tortor sit amet dolor euismod, et posuere nisl cursus. Donec eget pharetra tortor. Quisque massa enim, tincidunt ac ex et, condimentum imperdiet arcu. Etiam suscipit dolor lorem, nec pharetra est lacinia vitae.</p> 
<p>Donec varius nulla ac convallis eleifend. Quisque sit amet leo sodales, varius lacus quis, mattis nisl. Cras nisl leo, maximus eget scelerisque at, dignissim eu ex. Nulla...

CSS

.fixed-top{ 
  position:fixed; 
  z-index: 1030; 
  top: 0; 
  left: 0; 
  background: red;
  height: 80px;
  width: 100%; 
  }
.fixed-right{
 position: fixed;
 z-index: -1;
 background: green;
 width: 280px;
 right: 0;
 left: auto;
 top: 0;
 bottom: 0;
}

.main-content{
     z-index: 0;
    background: #fff;
    position: relative;
}
}