JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="app.js" defer></script>
    <link rel="stylesheet" href="icons/icomoon/style.css">
    <link rel="stylesheet" href="style.css">
    
</head>
<body>
    <section class="nav-wrapper">
        
        <div class="nav-wrapper-second">
            <div class="links">
               
                <div class = 'nav-dropdown-icon'>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                
            </div>
            <div class="search-div">
                <input type="text" placeholder ="Search">
            </div>
        </div>

        <div class = "mobile-nav-div" style="display:none;">
            <ul class="mobile-nav">
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Courses</a></li>
                <li><a href="">Staff</a></li>
                <li><a href="">Blog</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </div>
    </section>
    <div>
        Lorem 
        ipsum, dolor
         sit amet consectetur
          adipisicing elit. Similique,
         consectetur!
    </div>
</body>
</html>

CSS

@font-face {
  src: url(fonts/RobotoSlab-Regular.ttf);
  font-family: roboto;
}

body,
html {
  font-family: arial;
  margin: auto;
}

.nav-wrapper-second {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  background-color: rgb(85, 85, 85);
  padding: 5px 250px;
}

.links {
  margin-right: 70px;
  width: 500px;
}



.nav-dropdown-icon {
  padding-left: 20px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav-dropdown-icon>div {
  width: 30px;
  height: 2px;
  background-color: white;
}



/*MEDIA QUERIES*/


@media (max-width: 815px) {

  .mobile-nav-div {
    background-color: grey;
    width: 100%;
    animation-name: slide;
    animation-duration: 0.3s;
  }

  .mobile-nav {
    padding-left: 15px;
    margin: 0;
    display: flex;
    flex-direction: column;
    list-style: none;
    height: 300px;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
  }

  .mobile-nav>li {
    height: 16%;
    width: 100%;
    border-bottom: 1px solid rgb(207, 207, 207);
  }

  .mobile-nav>li>a {
    text-decoration: none;
    color: white;
    display: flex;
    align-items: center;
    margin-top: auto;
    width: 100%;
    height: 100%;
  }

  .mobile-nav>li>a:hover::after {
    position: absolute;
    margin-top: 48px;
    content: '';
    height: 2px;
    left: 0;
    background: rgb(0, 0, 0);
    animation-name: test;
    animation-duration: 1s;
    animation-fill-mode: forwards;
  }

  @keyframes test {
    from {
      width: 0px;
    }

    to {
      width: 100%;
    }
  }

  .reverse {
    /* a class to be added for the close animation*/
    display: flex;
    background-color: grey;
    width: 100%;
    animation-name: reverse-slide !important;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
  }

  @keyframes slide {
    from {
      height: 0px;
    }

    to {
      height: 300px
    }
  }

  @keyframes reverse-slide {
   ...

JavaScript

const mobileNav = document.querySelector(".mobile-nav-div");
const mobileNavItems = document.querySelectorAll(".mobile-nav-div > ul > li");
const mobileNavButton = document.querySelector('.nav-dropdown-icon');




function mobileNavInteract() {
    console.log(mobileNav.style.display)
    if (mobileNav.style.display === "none") {
        mobileNav.className = 'mobile-nav-div';
        mobileNav.style.display = "block";
        
        
        // for(i=0; i<mobileNavItems.length;i++) {
        //     mobileNavItems[i].style.borderBottom = '1px solid rgb(207, 207, 207)';
        // }

        
        
    }

    else if (mobileNav.style.display === 'block') {
        mobileNav.className = "reverse";
        mobileNav.style.display = "none";
        console.log(mobileNav.style.display)

        // for(i=0; i<mobileNavItems.length;i++) {
        //     mobileNavItems[i].style.border = 'none';
        // }

        
    }
}

mobileNavButton.addEventListener('click', mobileNavInteract)