JSFiddle - React, Tailwind, and code Playground

by techappetite

HTML

<div id="wrapper">
    <div id="header">
        <h1>Library Catalog</h1>
        <div id="headerMenu">
            <ul>
                <li><a href="#">Login</a></li>
                <li><a href="#">Register</a></li>
            </ul>
        </div>
    </div>
</div>

CSS

body{
    font-family:Calibri;
    padding:0; margin:0;
}
#wraper {
    margin:0 auto;
    width:80%;
}
#wrapper #header {
    background-color:#5252FF;
    padding:10px;
    
    height:20px;
    overflow:hidden;
    position:relative;
}
#wrapper #header h1 {
    color:white;
    font-weight:bold;
}
#wrapper #header #headerMenu {
    position:absolute;
    top:10px;
    right:0px;
    bottom:10px;
}
#wrapper #header #headerMenu li {
    list-style:none;
    display:inline;
}
#wrapper #header #headerMenu li a {
    padding:20px 5px 20px 5px;
    color:white;
    font-size:0.8em;
    text-decoration:none;
}
#wrapper #header #headerMenu li:hover a {
    background-color:#A8A8FF;
}