JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a9b20b17fc.js" crossorigin="anonymous"></script>
 <!-- header-->
        <header>
            <div class="headerContainer">
                <!-- Logo or Brandname -->
                <div class="headerBrand">
                    <a href=""><img src="https://krijgeronline.nl/assets/img/logo.png" width="auto" height="80px"> Logo text</a>
                </div>
                <!-- END Logo -->
                <!-- Nav -->
                <nav>
                    <ul class="mainMenu">
                        <li><a href="#">First link</a></li>
                        <li><a href="#">Second link</a></li>
                        <li><a href="#">Thirth link</a></li>
                        <li><a href="google.com">Fourth link</a></li>
                    </ul>
                </nav>
                <div class="menuBtn"><i class="fas fa-bars"></i></div>
                <!-- END Nav -->
            </div>
        </header>
        <!-- END header-->
        <!-- Main -->
        <main class="container">
            <section>
                <h1>This is a header</h1>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
                <p>This is some text</p>
            </section>
        </main>
        <!-- END Main-->

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    background: #F5F5F5;
    color: #1F1F1F;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
}
a {
    text-decoration: none;
    color: #1F1F1F;
}
/* --- HEADER --- */
header {
    width: 100%;
    height: auto;
    background: #FFF;
}
.headerContainer, .container {
    width: 90%;
    max-width: 1140px;
    margin: auto;
    padding: 15px;
}
.headerContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* --- Logo --- */
.headerBrand a {
    font-size: 2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
}
.headerBrand img {
    padding: 0 15px 0 0;
}
/* --- NAV --- */
header nav {
    /* display: none; */
    padding: 15px;
    background: #ffffff;
    transition: top 2s;
}

header nav ul.mainMenu {
    list-style: none;
}
header nav ul li a:hover {
    color: red;
}
.menuBtn {
    width: 35px;
    height: 35px;
    text-align: center;
    background: red;
    font-size: 25px;
    border-radius: 5px;
    cursor: pointer;
    color: #FFF;
}

/* --- MAIN --- */

nav {
  position:absolute;
  opacity:0;
}

nav.show {
  top:100px;
  opacity:1;
}

JavaScript

let Btn = document.querySelector(".menuBtn");
let menu = document.querySelector("nav");
let icon = document.querySelector(".fa-bars");
Btn.onclick = () => {
    menu.classList.toggle("show");
    icon.classList.toggle("fa-times");
}