JSFiddle - React, Tailwind, and code Playground

HTML

<div id="innerHeaders">
            <ul>
             <li id="homeBtn" class="topBtns"><a href="index.html">Home</a></li>
     <li id="aboutBtn" class="topBtns"><a href="#" onClick="aboutData();">About</a></li>
         <li id="feedBackBtn" class="topBtns"><a href="xyz@abc.com">Feedback</a></li>
            </ul>
           </div>

CSS

#innerHeaders 
      {
       background-color: #026062;
       height: 33px;
       left: 269px;
       position: relative;
       top: 17px;
       width: 755px;
      }


       ul li
       {
        display:inline-block;
		*float:left;
        color:#FFF;
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size:14px;
        font-weight:bold;
        text-align:center;
        vertical-align:middle;
       }

        ul li a
        {
        text-decoration:none;
        color:#FFF;
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size:14px;
        font-weight:bold;
        text-align:center;
        vertical-align:middle;
        /*position:absolute;*/
        top: 7px;
        left:45.5px;
        }
          ul li a:hover
          {
          text-decoration:underline;
          }

         .topBtns
          {
         background-image:url(../images/topBtnsBg.png);
         width:128px;
         height:33px;
          }