JSFiddle - React, Tailwind, and code Playground

HTML

<!-- drawermenu -->
            <!-- drawermenu-button -->
            <div class="modal-button-wrap">
                <a class="animation-hover action-hover modal-button-wrap__button kuruttosuru">
                    <span class="modal-button-wrap__border"></span><!-- border -->
                    <span class="modal-button-wrap__border"></span><!-- border -->
                    <span class="modal-button-wrap__border"></span><!-- border -->
                </a>
            </div>



            <!-- drawermenu -->
            <nav>
                <div id="drawermenu">
                <ul>
                    <li>
                        <a class='top-header__social-btn drawermenu__social-btn symbol animation-hover action-hover' href="https://plus.google.com/share?url=http:///index.html" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" title='&#xe039;'></a>
                        
                        <a class='top-header__social-btn drawermenu__social-btn symbol animation-hover action-hover' href="http://www.facebook.com/share.php?u=http:///index.html" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" title='&#xe027;'></a>
                        
                        <a class='top-header__social-btn drawermenu__social-btn symbol animation-hover action-hover' href="http://twitter.com/share?url=http:///index.html&text=%F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B%E3%81%A6%E8%A1%8C%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%BE%E3%81%97%E3%82%87%E3%81%86%E3%80%82" title='&#xe086;'></a>                 
                    </li>
                    <li id="maware"><a class="link-block" href="#js-about-me">ABOUTME</a></li>
                    <li><a  class="link-block action-hover animation-hover" href="#js-gallary">GALLARY</a></li>
                    <li><a  class="link-block action-hover animation-hover"...

CSS

/* ---------------------------------------------------------
Other-Settings
----------------------------------------------------------*/
/*      Mediqueries
        ----------- */
/* 左から出てくるdrawer-menu */
[id="drawermenu"] ul {
    z-index: 300;
    width: 100%;
    position: fixed;
    top: 0;
    padding-top: 2.8rem;
    text-align: center;
    cursor: pointer;
    margin-left: -100%;
    transition-propety:all;
    transition-duration:1s;
}

[id="drawermenu"] li {
    margin-bottom: 0.2rem;
    background: rgba( 229, 228, 255, 0.3 ); 
    /*background: -o-linear-gradient(left, rgba(52, 152, 219,0.5) #066, rgb(41, 128, 185,0.5) #066);
    background: linear-gradient(to right, rgba(52, 152, 219,0.5) #066, rgb(41, 128, 185,0.5) #066);*/
}

[id="drawermenu"] li a {
    height: 6rem;
    line-height: 6rem;
    margin: 0 auto;
    color: #fff;
    font-size: 2rem;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0,0,0,.9);
}

.link-block {
    display: block;
    z-index: 99999;
}

/* .modal-button-wrap__buttonをクリックした際に加えられる */
[id="drawermenu"] .showMenue {
    margin-left: 0%;
}
/* /.modal-button-wrap__buttonをクリックした際に加えられる */
/* 左から出てくるdrawer-menu */

/* modalwindow-button-white-threeborder */
/*モーダルウィンドウのボタンの囲い*/
.modal-button-wrap {
    position: fixed;
    top: 2%;
    right: 3%;
    height: 100%;
}

@media (min-width: 960px) {
.modal-button-wrap {
    top: 5%;
    right: 5%;
}    
}

/*モーダルウィンドウのボタン*/
/* shadow */
.modal-button-wrap__border {
    box-shadow: 0 0.2rem 0.2rem rgba(0,0,0,.9);
}
/* /shadow */

.modal-button-wrap__button,
.modal-button-wrap__button span,.overlay-haikeikurokari {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
}

/*button-size*/
.modal-button-wrap__button,.overlay-haikeikurokari {
    position: relative;
    width: 5rem;
    height: 4.4rem;
}
/* /button-size */

.modal-button-wrap__button span,.overlay-haikeikurokari span {
    position: absolute;
    left: 0;
    width: 100%;
    height:...

JavaScript

<!-- drawermenu-button-three-whiteline-クリックした際にクルット回るアクション -->
            <script>
                $(function(){
                    $('.kuruttosuru').on('click', function() {
                        $(this).addClass('active');
                         return false;
                    });
                });
            </script>
            
            <!-- blackbackground-クリックした際にクルット回るアクション- -->
            <script>
            $(function(){
                $(document).on('click', '.overlay-haikeikurokari, #maware, .link-block ,.showMenue', function(){ 
                    //ulをクリックすると、メニューが戻る
                    $('.kuruttosuru').removeClass('active');
                    // $(this).off('click');
                });
            });
            </script>

            <!-- drawermenu-左右の動き -->
            <script>
                $('.modal-button-wrap__button,.link-block').click(function(){
                    //ulをクリックすると、メニューが出たり戻ったりする
                    $('#drawermenu ul').toggleClass('showMenue');//モーダルのクラスを削除して、モーダルボディーを戻す
                });
                $('#drawermenu ul li').click(function(){
                    //ulをクリックすると、メニューが出たり戻ったりする
                    $('#drawermenu ul').toggleClass('showMenue');//モーダルのクラスを削除して、モーダルボディーを戻す
                });
                $(document).on('click', '.overlay-haikeikurokari, #js-drawermenu__gototop ,.showMenue', function(){ 
                    //.メニューが出る必要はなく、戻る動きだけ必要な場合
                    $('#drawermenu ul').removeClass('showMenue');//モーダルのクラスを削除して、モーダルボディーを戻す
                });
            </script>

            <!-- drawermenu-buttonwrap-fadein-fadeout-スクロールした時ハンバーガーメニューが表記される -->
            <script>
                $('.modal-button-wrap,.modal-button-wrap__button').css('display','none');
                $(window).scroll(function(){
                    if($(window).scrollTop() > 8) {
                        $('.modal-button-wrap,.modal-button-wrap__button').fadeIn();
                    }else{
     ...