JSFiddle - React, Tailwind, and code Playground

HTML

<header>
        <div class="container">
            <div id="brand">
                <h1><span class="highlight">My</span> website</h1>
            </div>
            <nav>
                <ul>
                    <li class="current"><a href="Home.html">Home</a></li>
                    <li><a href="cv.html">Curriculum Vitae</a></li>
                    <li><a href="pc.html">PC Gaming</a></li>
                    <li><a href="#">Memes</a>  
                        <ul>
                            <li><a href="#">Hot</a></li>
                            <li><a href="#">Trending</a></li>
                            <li><a href="#">Upload File</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>        
    </header>

CSS

header {
    background: #35424a;
    color: #fff;
    padding-top: 30px;
    min-height: 70px;
    border-bottom: #e8491d 3px solid;   
}

header a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
}

header li {
  position: relative;
    display: inline;
    padding: 0 20px 0 20px;  
}

header #brand {
    float: left;
}

header #brand h1 {
    margin: 0;
}
header nav {
    float:right;
    margin-top: 10px;
}
header .highlight, header .current a {
    color: #e8491d;
    font-weight: bold;
}
header a:hover{
    color: #ccc;
    font-weight: bold;
}
nav ul li:hover ul {
    display: block;
} 
nav ul ul {
    display:none;
    position: absolute;
    top: 100%;
    left: 0;
}
nav ul ul li {
    display: block;
    background: #e8491d;
}