JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <div class="nav-mobile">
        <a id="nav-toggle" href="#!"><span></span></a>
    </div>
    <ul class="nav-list">
        <li><a href="homeCtrl.php?place=Home">Home</a></li>
        <li><a href="#!">About Us</a>
            <ul class="nav-dropdown">
                <li><a href="homeCtrl.php?place=Our Story">Our Story</a></li>
                <li><a href="homeCtrl.php?place=Our Work">Our Work</a></li>
                <li><a href="homeCtrl.php?place=SWAG Leaders">SWAG Leaders</a></li>
                <li><a href="homeCtrl.php?place=In the News">In the News</a></li>
            </ul>
        </li>
        <li><a href="homeCtrl.php?place=Calendar">Calendar</a></li>
        <li><a href="#!">Take Action</a>
            <ul class="nav-dropdown">
                <li><a href="homeCtrl.php?place=Get Involved">Get Involved</a></li>
                <li><a href="homeCtrl.php?place=Donate">Donate</a></li>
            </ul>
        </li>
        <li><a href="homeCtrl.php?place=Resources">Resources</a></li>
    </ul>
</nav>

CSS

.nav-list > li:first-child{
    font-weight:bold;
}