JSFiddle - React, Tailwind, and code Playground

by techappetite

HTML

<div id="wrapper">
    <div id="header">
        <div id="header-wrap">
            <div id="title">
                <a href="#">Library Catalog</a>
            </div>
            <div id="menu-bar">
                <div id="menu-bar-wrap">
                    <ul>
                        <li><a href="#">Login</a></li>
                        <li><a href="#">Register</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

body {
    font-family:Calibri;
    padding:0;margin:0;
}
#wrapper {
    width:100%;
}
#wrapper #header {
    width:100%;
    background-color:#6E6EFF;
    height:100%;
    color:white;
}
#wrapper #header-wrap {
    padding:10px;
    position:relative;
}
#wrapper #header-wrap #title a{
    font-size:1.2em;
    text-decoration:none;
    color:white;
}
#wrapper #header-wrap #menu-bar{
    position:absolute;
    top:0px; right:0px; bottom:0;
    width:145px;
    border-left:1px solid #9797FF;
}
#wrapper #header-wrap #menu-bar #menu-bar-wrap {
    position:relative;
    width:100%;
    height:100%;
    text-align:center;
    background-color:#5656B7;
}
#wrapper #header-wrap #menu-bar ul {
    padding:12px;
}
#wrapper #header-wrap #menu-bar ul li {
    list-style:none;
    display:inline;
}
#wrapper #header-wrap #menu-bar ul li a {
    padding:5px;
    border:2px solid gray;
    background-color:#B7BFEF;
    border-radius:4px;
    text-decoration:none;
    overflow:hidden;
}
#wrapper #header-wrap #menu-bar ul li a:hover {
    border-color:#8690CB;
    background-color:#A8B4FF;
}