JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav-wrapper" onclick="">
        <nav>
            <div class="ym-column">
                <div class="ym-col1">
                    <div id="sn_menu_ip">
                        <input id="sn_menuXX" class="ipXX" name="sn_menu" type="radio">
                        <!-- Schliessen-Symbol --><input id="sn_menu00" class="ip00" name="sn_menu" type="radio">
                        <input id="sn_menu01_close" class="sn_menu_close" name="sn_menu" type="radio">
                        <input id="sn_menu01" class="ip00 ip01" name="sn_menu" type="radio">
                        <input id="sn_menu02" class="ip00 ip02" name="sn_menu" type="radio">
                        <p id="sn_menu_toggle"> <label for="sn_menu00"><span></span></label> <label for="sn_menuXX"><span></span></label></p>
                        <div id="sn_menu_background"> </div>
                        <div id="sn_menu_outer">
                            <div id="sn_menu_vertical"> </div>
                            <div id="sn_menu">
                                <p id="sn_menu_toggle"><a href="#top">Home</a> <label for="sn_menu"><span></span></label></p>
                                <p class="sn_menu01">
                                    <label for="sn_menu01">
                                        <span></span>Infos und Preise
                                    </label><label for="sn_menu00"></label>
                                </p>
                                <div>
                                    <p><a href="#angebot"><label for="sn_menu01_close" class="close">Angebot und Preise</label></a></p>
                                    <p><a href="#weiteres">Zusätzliche Infos</a></p>
                                    <p><a href="default.html#wo wir sind">Wo wir sind</a></p>
                                    <p id="sn_menu_toggle"><label for="sn_menu01"><span></span></label>
                                </div>
                                <p><a...

CSS

#sn_menu_background {
            background: rgba(252, 252, 252, 0.9);
            width: 38vw;
            /*48vw;*/
            border-left: 1vw solid transparent;
            border-right: 1vw solid transparent;
            height: 100vh;
            min-width: 295px;
            position: fixed;
            /*	left: 0; */
            ;
            top: -100%;
            opacity: 0;
            transition: top 0s 2s, opacity 0.5s 1s;
            z-index: 100005;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
            float: left;
            margin-left: -.75em;
        }

        #sn_menu_outer {
            display: block;
            font: 700 20px/40px 'Open Sans Condensed', sans-serif;
            color: #888;
            width: 40vw;
            /*50vw;*/
            border-left: 1vw solid transparent;
            border-right: 1vw solid transparent;
            height: 100vh;
            min-width: 295px;
            opacity: 0;
            position: fixed;
            /*	left: 0; */
            ;
            top: -100vh;
            transition: 0.5s 0.75s;
            z-index: 100010;
            overflow: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        #sn_menu_vertical {
            width: 1px;
            height: 100vh;
            display: inline-block;
            vertical-align: middle;
        }

        #sn_menu_outer #sn_menu p {
            position: relative;
            padding: 0;
            margin: 0;
        }

            #sn_menu_outer #sn_menu p label {
                display: block;
                line-height: 39px;
                text-transform: uppercase;
                margin-left: -15px;
            }

                #sn_menu_outer #sn_menu p label:hover {
                    color: #000;
                }

                #sn_menu_outer #sn_menu p label:last-child {
                    display: none;
                    position: absolute;
                 ...