JSFiddle - React, Tailwind, and code Playground

by Chris LaFrombois

HTML

<div id="navWrapper">
    <div id="navContent">
        <div id="logo">
            <img src="assets/logo.png" />
        </div>
        <!-- #logo -->
        <div id="menu">
            <div class="item"><a href="">dadada</a>
            </div>
            <div class="item"><a href="">dadada</a>
            </div>
        </div>
        <!-- #menu -->
    </div>
    <!-- #navContent -->
</div>
<!-- #navWrapper -->

CSS

#navWrapper {
    background-color:#3f3f3f;
    margin-left: 20px;
    margin-right: 20px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    margin-top:0 auto;
}
#navContent {
    width:100%;
    height:65px;
}
#navContent #logo {
    width:200px;
    float:left;
    display:inline;
    margin-left:30px;
    margin-top:15px;
}
#navContent #menu {
    height:25px;
    float:right;
    display:inline;
    border: 1px solid #ffffff;
    margin-right:30px;
    margin-top:15px;
}
.item {
    float:left;
    position:relative;
    padding-left:10px;
}

.item a {
    color:white;
}