JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
        <label for="toggle"> <span>X</span> </label>
    <input id="toggle" type="checkbox" />
    <div class="mobnavtxt to-be-changed">
        <a data-scroll href="#about">ABOUT</a>
        <a data-scroll href="#services">SERVICES</a>
        <a data-scroll href="#blog1">BLOG</a>
        <a data-scroll href="#blog2">REVIEWS</a>
        <a data-scroll href="#contact">CONTACT</a>
        <span class="links">
            <a href="#"><i class="fa fa-facebook"></i>
            </a>
            <a href="#"><i class="fa fa-instagram"></i>
            </a>
            <a href="#"><i class="fa fa-twitter"></i>
            </a>
            </span>
        <!-- links -->
        <span class="email"><a href="mailto: email@email.com">email@email.com</a></span>
    </div>
    <!-- mobnavtxt -->
    </nav>

CSS

.mobnavtxt {
    width: 100%;
    height: 50vh;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    display: flex;
    z-index: -1;
    justify-content: space-around;
    align-items: flex-start;
    flex-direction: column;
    padding: 50PX 30px 30PX 40PX;
    box-sizing: border-box;
    transition: .2s;
}

.mobnavtxt .links {
    margin: 15px 0;
    letter-spacing: 10px;
}

.mobnavtxt a {
    text-decoration: none;
    color: #222;
}

label {
    background: #fff;
}

input[type=checkbox] {
    display: none;
}

input[type=checkbox] ~ .to-be-changed {
    top: -60vh;
}

input[type=checkbox]:checked ~ .to-be-changed {
    top: 0;
}

nav {
    width: 100%;
    height: 50px;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    padding: 20px;
    box-sizing: border-box;
    z-index: 1;
}