JSFiddle - React, Tailwind, and code Playground

by aarkuo17

HTML

<div id="sitebody">
　<div id="header">header</div>
　<div id="sidebar_left">sidebar_left
 </div>
　<div id="sidebar_right">sidebar_right
 </div>
　<div id="content">content</div>
　<div id="footer">footer</div>
</div>

CSS

#sitebody{
 width: 600px;
 height: 720px;
 margin: auto;
 font-size: 13px;
 color: black;
}
#header{
 background-color: #FFD4D4;
 height: 80px;
 text-align: center;
 line-height: 80px;
}

#sidebar_left{
 background-color: #FFECC9;
 width: 120px;
 height: 400px;
 text-align: center;
 line-height: 400px;
 float: left;
}
#sidebar_right{
 background-color:#FFECC9;
 width: 120px;
 height: 400px;
 text-align: center;
 line-height: 400px;
 float: right;
}
#content{
 margin-left: 120px;
 margin-right: 120px;
 height: 400px;
 background-color: #F2FFF2;
 text-align: center;
 line-height: 400px;
}
#footer{
 clear: both;
 background-color: #FFD4D4;
 height: 80px;
 text-align: center;
 line-height: 80px;
 margin-top: -20px;
}