JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navi">
        <span></span>
  		<ul id="navilist">
            <li><a href="#SGU">SGU</a></li>
            <li><a href="#SGJR">SGJR</a></li>    
            <li><a href="#REGISTRATION">REGISTRATION</a></li>
            <li><a href="#SCHOLARSHIP">SCHOLARSHIP</a></li>
            <li><a href="#MERCHANDISE">MERCHANDISE</a></li>
            <li><a href="#FORMS">FORMS</a></li>
            <li><a href="#PAY">PAY FOR SGU</a></li>
  		</ul>
	</div>

CSS

span { 
    vertical-align: middle;
    display: inline-block; }
ul{
    margin:0; padding:0;
    display:inline-block;
    list-style-type:none; 
    vertical-align:middle; }
#navi {
	height: 100px;
	background: #ed7a4f;
}
#navi li{	
    display: inline-block;
	padding: 5px; }

#navi a{color:#6cc54b; font-size:10px;}
#navi a:hover{color:#5ea9ea; text-decoration:underline;}