JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    
    <header>
        <div class='logo-container'>
            <div class='logo'>Logo</div>
        </div>
        
        <div class='nav'>                
            <a href='#'>Home</a>
            <a href='#'>About me</a>
            <a href='#'>Works</a>
            <a href='#'>Resume</a>
        </div>
    </header>
</body>

CSS

*{
    margin: 0;
    padding: 0;
}
header{
    margin: 0 auto;
    width: 600px;
}

.logo-container{
    float: left;
    padding-top: 20px;
}
.logo{
    border: 1px solid red;
    width: 100px;
    height: 40px;
}

.nav{
    float: right;
}

.nav a{
    padding: 30px 10px 10px;
    display: inline-block;
}

.nav a:hover{
    background-color: red;
}