JSFiddle - React, Tailwind, and code Playground

by rohitazad

HTML

<div style="border-bottom-right-radius: 0.6em; 
                    border-bottom-left-radius: 0.6em;
                    box-shadow: 0px 0px 7px #000000;
                    width: 960px;margin:10px 0 0 10px;">
            <div id="nav">
                
                <div class="logo">Logo here </div>
                
your navi here 
            </div>
        </div>

CSS

#nav {
background: rgba(0,0,0,0.1);
height: 40px;
border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
color:black;
    margin:10px 0 0 0;
    position:relative;
    padding-left:110px;
}
.logo{
    position:absolute;
    top:0;
    left:0;
    width:100px;
    height:25px;
    background:green;
}