JSFiddle - React, Tailwind, and code Playground

HTML

<header> 
    <nav>
        <div>
            <img src="img/header.png" alt="logo">
            <i class="fas fa-bars trigger">menu</i>
        </div>
        <div class="menu-container hidden">
            <div class="menu">
                <a href="#">option</a>
                <a href="#">option</a>
                <a href="#">option</a>
                <a href="#">option</a>
            </div>
        </div>
    </nav>
</header>
<p><a href="#">Option I can't click</a></p>
<p><a href="#">Option I can't click</a></p>
<p><a href="#">Option I can't click</a></p>
<p><a href="#">Option I can't click</a></p>

CSS

.menu {
  position: relative;
  top: -300px;
  transition: 0.3s all;
}

.menu--open {
  top: 0;
 transition: 0.3s all;
}

nav {
    width: 100%;
    height: 70px;
    position: absolute;
    z-index: 1;
    top: 0;
}

nav div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

nav div:nth-child(1) {
    background: white;
    z-index: 1;
    position: relative;
}

 .menu-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fa-bars {
    margin-right: 20px;
    font-size: 20px;
}

.fa-bars:hover {
    cursor: pointer;
}

span .menu {
    background: #95baa8;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

div .menu a {
    padding: 15px;
    text-decoration: none;
    color: white;
}

JavaScript

const menu = document.querySelector('.menu');
const trigger = document.querySelector('.trigger');

function toggle() {
  menu.classList.toggle('menu--open');
}

trigger.addEventListener('click', toggle);