JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Sure Habbo</title>
    <link href="css/style.css" type="text/css" rel="stylesheet"/>
</head>

<body>
    <ul id="nav">
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">etc</a></li>
        <li><a href="#"><img src="images/login.png" alt="" class="floatr"/></a></li>
    </ul>

</body>
</html>

CSS

#nav {
    background:rgb(50,50,50);
    margin:0;
    padding:13px;
    border-bottom:solid 1px rgba(0,0,0,.1);
}
#nav ul {
    margin:0;
    padding:0;
}
#nav img {
    margin:0;
    padding:0;
}
#nav a {
    color:rgb(255,255,255);
    text-decoration:none;
    padding:10px;
}
#nav a:hover {
    background:rgb(80,80,80);
    border-radius:2px;
}
#nav a.active {
    background:rgb(80,80,80);
    border-radius:2px;
}
li {
    display:inline;
}
.floatr {
    float:right;
    clear:both;
}