JSFiddle - React, Tailwind, and code Playground

by GCyrillus

HTML

<div id="parent">
        <nav id="child" role="navigation">
            <ul class="menu2">
                <li><a href="#home" rel="home_link" class="scrolly">Home</a></li>
                <li><a href="#banner" rel="about_link" class="scrolly scrolly-centered">About</a></li>
                <li><a href="#first" rel="events_link" class="scrolly">Shows</a></li>
                <li><a href="#" rel="artists_link">Music</a></li>
                <li><a href="#" rel="contact_link">Contact</a></li>
            </ul>
        </nav>  
    </div>

CSS

#parent {
    background: #000; 
    background: rgba(0,0,0,0.50);
    width: 100%;
    top:0;
    left:0;
    text-align:right;
    line-height: 70px;
    position: fixed ;
    z-index: 1;
}

#child {
    display: inline-block;
    text-align: center;
    margin-right: 30px; 
    vertical-align:middle;
}

ul.menu2 {
    cursor: default;
    border : 0;
    margin : 0;
}

ul.menu2 li {
    display: inline-block;
    padding: 0 0 0 0.5em;
    margin: 0 0 0 0.5em;
}