JSFiddle - React, Tailwind, and code Playground

by NotInUse

HTML

<div id="wrapper">

    <div id="header">
        <img src="filediet2.jpg" width="250" height="100"/>
        <div id="heading"><span id="hmes"> Admin Control Panel </span></div>
    </div>
    
    <div id="below-header">
            <div id="menu-cont">
            <div id="menu">
                <ul><a href="">Option 1</a>
                <a href=""><li>Sub-option 1</li></a>
                <a href=""><li>Sub-option 2</li></a>
                <a href=""><li>Sub-option 3</li></a>
                </ul>  
                  
                <ul><a href="">Option 2</a>
                <a href=""><li>Sub-option 1</li></a>
                <a href=""><li>Sub-option 2</li></a>
                <a href=""><li>Sub-option 3</li></a>
                </ul>
                
                <ul><a href="">Option 3</a>
                <a href=""><li>Sub-option 1</li></a>
                <a href=""><li>Sub-option 2</li></a>
                <a href=""><li>Sub-option 3</li></a>
                </ul>
                
                <ul><a href="">Option 4</a>
                <a href=""><li>Sub-option 1</li></a>
                <a href=""><li>Sub-option 2</li></a>
                <a href=""><li>Sub-option 3</li></a>
                </ul>
            </div>
            </div>
    <div id="content">
        Content here</div>
    </div>


</div>

CSS

@charset "utf-8";
/* CSS Document */
@font-face {
    font-family:eureka;
    src:url(Eureka-Medium.otf);
    
}
#wrapper{
    position:relative;
    top:0;
    left:0;
    padding:0;
    margin:0 auto;
    width:100%;
    height:100%;
    background:#C7DEBE;
}

#header{
    position:relative;
    top:0;
    left:0;
    width:100%;
    height:100px;
    background:#AEB3D2;
    overflow: hidden;
}
#menu-cont{
    position:relative;
    left:0;
    min-width:250px;
    width:15%;
    height:500px;
    float:left;
    background:#9D9C6F;
}
#content{
    position:relative;
    display: inline-block;
    height:500px;
    background:#C7DEBE;
}
#header img{
    float:left;
}
#heading{
    position:relative;
    margin-left:200px;
    top:20px;
    height:50px;
    text-align:center;
    vertical-align:middle;
}
#hmes{
    font-size:35px;
    font-family:eureka;
    color:#DFDFF2;
}
#below-header{
    position:relative;
    width:100%;
    height:auto;
    border:1px solid;
}
#menu ul{
    font-family:Verdana, Geneva, sans-serif;
    font-size:18px;
    color:#EDDEC2;
    margin-left:30px;
    list-style-type:none;
}
#menu ul:active #menu ul li{
}
#menu ul a{
    text-decoration:none;
    color:#EDDEC2;
}
#menu ul a:hover a li{
    color:#F0E8CE;
    list-style-image:url(bullets.png);
}
#menu ul li{
    font-size:14px;
    margin-left:-5px;
    
}
#menu ul a li:hover{
    list-style-image:url(bullets.png);
}