JSFiddle - React, Tailwind, and code Playground

by Marco

HTML

<div id="central-section" class="central-section-base">
            <div id="ddtopmenubar" class="mattblackmenu">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#" rel="ddsubmenu1">Element 1</a></li>
                    <li><a href="#" rel="ddsubmenu2">Element 2</a></li>
                    <li><a href="#" rel="ddsubmenu3">Element 3</a></li>

                </ul>
            </div>

CSS

.mattblackmenu ul{
margin: 0;
padding: 0; 
font: bold 12px Verdana;
list-style-type: none;
border-bottom: 1px solid gray;
background:     #153E7E;
overflow: hidden;
width: 100%;
text-align: center;
}

.mattblackmenu li{
display: table;
margin:0px auto 0px auto;
text-align:center;
display:inline-block;  
}

.mattblackmenu li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 6px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #153E7E;

}