JSFiddle - React, Tailwind, and code Playground

by torovoltanrex

HTML

<body>

<div id="header">
this is the header
</div>

<div id="wrapper">
    
<div id="content-box">
</div>

<div id="left-nav">
<ul id="left-nav-links">
<li> <a href="#"> Link Item #1 </a></li>
<li> <a href="#"> Link Item #2 </a></li>
<li> <a href="#"> Link Item #3 </a></li>
<li> <a href="#"> Link Item #4 </a></li>
<li> <a href="#"> Link Item #5 </a></li>
</ul>
</div>

<div id="footer">
this is the footer
</div>
</div>
    
</body>

CSS

@charset "utf-8";
   /* CSS Document */

 #header {
height: 250px;
width: 728px;
border: dashed #000;
text-align:center;
font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
font-size:12px;
    margin:0 auto;
}
#wrapper {
    background-color:orange;
    width:740px;
    margin:0 auto;
    padding:0;
}
#footer {
    margin:0 auto;
height: 28px;
width: 728px;
border: dashed #000;
text-align:center;
font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
font-size:12px;
clear:both;
}

#left-nav {
    padding:0;
height: 500px;
width: 150px;
border: dashed #000;
text-align: center;
font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
font-size: 14px;
float:left;

}

#content-box {
    padding:0;
height: 500px;
width: 578px;
border: dashed #000;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
float:right;
}