JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pfix">
        <nav class="nav" id="nav_f">
            <ul>
                <li><a href="#one" class="list">one</a></li>
                <li><a href="#two" class="list">two</a></li>
                <li><a href="#three" class="list">three</a></li>
                <li><a href="#four" class="list">four</a></li>
                <li><a href="#five" class="list">five</a></li>
            </ul>
        </nav>

        <div id="target">
        <div class="target_inner">
                <span class="target_inner_line target_inner_1" id="line1"></span>
                <span class="target_inner_line target_inner_2" id="line2"></span>
                <span class="target_inner_line target_inner_3" id="line3"></span>
            </div>
        </div>
        </div>

CSS

.mainnav__items{
        display: none;
    }

    .pfix{
        display: inherit;
    }

    #target{
        width: 40px;
        height: 30px;
        display: block;
        position: absolute;
        top: 35px;
        left: 84vw;
        cursor: pointer;
        transition: 1.5s;
    }

    .target_inner{
        width: 40px;
        height: 30px;
        position: relative;
    }

    .target_inner_line{
        display: block;
        width: 40px;
        height: 5px;
        background: #fff;
        transition: 1.5s;
        border-radius: 50px;
        position: absolute;
        z-index: 1;
    }


    .target_inner_1{
        top: 0;
    }

    .target_inner_2{
        top: 13px;
    }

    .target_inner_3{
        top: 26px;
    }

    .nav{
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: 1;
        left: -100%;
        background: rgba(99,99,99,.95);
        transition: 1.5s;
        color: white;
    }



    .nav a{
        color: white;
        display: block;
        text-decoration: none;
    }

    ul{
        margin: 0;
        padding: 0;
    }

    .nav li{
        height: calc(100vh/5);
        line-height: 200px;
        list-style: none;
        font-size: 3em;
        text-align: center;
    }

    .fadein{
        left: 0;
    }

    .linea, .lineb, .linec{
        background: #ffffff;
    }

    .linea{
        transform: rotate(225deg);
        top: 13px;
    }

    .lineb{
        opacity: 0;
    }

    .linec{
       transform: rotate(-225deg);
        top: 13px;
    }

body {
  background-color: #555;
}

JavaScript

function hamburger() {
　　document.getElementById('line1').classList.toggle('linea');
　　document.getElementById('line2').classList.toggle('lineb');
　　document.getElementById('line3').classList.toggle('linec');
　　document.getElementById('nav_f').classList.toggle('fadein');
}

document.getElementById('target').addEventListener('click', function () {
　　hamburger();
});