JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <title>demo</title>
</head>
<body>
    <div id="top"> TOP</div>
    <div id="bottom"> BOTTOM</div>
    <div id="left"> LEFT</div>
    <div id="right"> RIGHT</div>
    <div id="content">
        <div>        
        mon site
        </div>
    </div>
</body>
</html>

CSS

html{
    height:100%;
}

body{
    height:100%
}
#content{
 background-color:blue; 
    width:100%;
    height:100%;
    color:white; 
}
#content div{
    padding:100px;
}
#top{
   position:absolute;
   height:100px;    
    background-color:white;
    width:100%;
}
#bottom{
   position:absolute;
   height:100px;    
    background-color:white;
    width:100%;
    bottom:0;
}
#left{
   position:absolute;
   top:100px;
   bottom:100px;    
    background-color:white;
    width:100px;
     
}
#right{
   position:absolute;
   top:100px;
   bottom:100px;   
    background-color:white;
    width:100px;
    right:0
     
}