JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="mainMenu">
                    <ul>
                        <li class="first li_first">
                            <a href="#">Home</a>
                        </li>
                        <li class="">
                            <a href="#">About Us</a>
                        </li>
                        <li class="">
                            <a href="#">Events</a>
                        </li>
                        <li class="">
                            <a href="#">Admissions</a>
                        </li>
                        <li class="">
                            <a href="#">Courses</a>
                        </li>
                        <li class="">
                            <a href="#">Faculty</a>
                        </li>                                                
                        <li class="last li_last">
                            <a href="#">Contact Us</a>
                        </li>
                    </ul>                  
                </nav>

CSS

#mainMenu ul { padding: 0;margin: 0; }
        #mainMenu li { border: 1px #000 solid; }
        #mainMenu li { height: 48px; display: inline-block; }
            #mainMenu li a { 
                display: inline-block;
                margin: 5px 0;
                color: #000; 
                font-size: 15px; 
                text-transform: uppercase; 
                border-right: #ddd 1px solid; 
                padding: 10px 20px;
            }
            #mainMenu li:last-child a {
                border-right: none;
            }
        #mainMenu ul li:hover { background: url("../images/mm_bg.png") bottom repeat-x; }