JSFiddle - React, Tailwind, and code Playground

HTML

<div class="holder">
    <strong class="logo"><a href="#">Some logo</a></strong>
</div>

<!-- navigation opener -->
<a href="#" class="nav-opener"><span>opener</span></a>

<div class="navigation-container">
    <div class="drop">
        <!-- main navigation of the page -->
        <nav id="nav">
            <ul>
                <li class="active"><a href="#">HOME</a></li>
                <li><a href="#">BIBLE RESOURCES</a></li>
                <li><a href="#">OUR MISSION</a></li>
            </ul>
        </nav>
    </div>
</div>

CSS

@media screen and (max-width: 768px){
    
    .holder {
        padding: 14px;
    }
    
    .logo {
        float: none;
        display: block;
        margin: 0px auto;
        width: 168px;
        position: relative;
        z-index: 2;
    }
    
    a {
        text-decoration: none;
        color: #DC7952;
        outline: medium none;
    }
    
    .logo img {
        width: 100%;
        height: auto;
        display: block;
    }
    
    img {
        max-width: 100%;
        height: auto;
    }
    
    .nav-opener {
        display: block;
        position: absolute;
        top: 0px;
        right: 0px;
        border-left: 1px solid #D4D4D4;
        width: 65px;
        height: 53px;
        text-indent: -9999px;
        overflow: hidden;
        background: none repeat scroll 0% 0% transparent;
        z-index: 15;
    }
    
    .nav-opener::before, .nav-opener::after {
        content: "";
        top: 19px;
    }
    
    .nav-opener::before, .nav-opener::after, .nav-opener span {
        background: none repeat scroll 0% 0% #DC7952;
        position: absolute;
        left: 15%;
        right: 15%;
        height: 6px;
        margin-top: -2px;
        transition: all 0.2s linear 0s;
    }
    
    .nav-opener::after {
        top: 37px;
    }
    
    .nav-opener span {
        background: none repeat scroll 0% 0% #DC7952;
        position: absolute;
        top: 28px;
        left: 15%;
        right: 15%;
        height: 6px;
        margin-top: -2px;
        transition: all 0.2s linear 0s;
    }
    
    .nav-active .nav-opener::after, .nav-active .nav-opener::before {
        transform: rotate(45deg);
        border-radius: 3px;
        top: 24px;
        left: 15%;
        right: 15%;
    }
    
    .nav-active .nav-opener::after {
        transform: rotate(-45deg);
    }
    
    .nav-opener::before, .nav-opener::after {
        content: "";
    }
    
    .nav-active .nav-opener span {
        display: none;
    }
    
   ...

JavaScript

$("a.nav-opener").click(function(e) {
  e.preventDefault();
  $('body').toggleClass("nav-active");
});