JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
    <div class="headerContent">
        <a href="#">
            <img src="logo3.png" alt="Grenada Down Syndrome Association"/>
        </a>
        
    <div class="nav">
        <ul>
            <li><a href="home.html">Home</a></li>
            <li><a href="aboutus.html">About Us</a></li>
            <li><a href="events.html">Events</a></li>
            <li><a href="contact.html">Contact Us</a></li>
          </ul>
        
            </div>
        </div>
        <div class="headerbreak"> </div>
    </div>

CSS

body{ 
    margin: 0;
}

.logo {
    text-indent: -999999px;
    background: url('logo3.png');
    width: 216px;
    height: 219px;
}

.header{
    width: 100%;
    height: auto;
    background-color: #eef3f5;
    padding-top: 24px;
}
.headerContent {
    height: auto;
    margin: 0 auto;
}

.headerContent > a {
    display: inline-block;
    vertical-align: top;
}
.headercontent a img{
    width: 659px;
    height: 144px;
    margin: 0px auto;
    display: block;
}
.nav {
    display: inline-block;
    height: 40px;
    vertical-align: top;
    background: #0000ff;
}
.nav ul{
    margin: 0;
    padding: 0;
}
.nav ul li{
    list-style: none;
    float: left;
}
.nav ul li a{
    text-decoration: none;
    float: left;
    display: block;
    padding: 10px 20px;
    color: black;
}
.nav ul li a:hover{
    color: white;
}
.headerbreak {
    width: 100%;
    height: 0;
    border-bottom: 2px solid #ff0000; 
}