JSFiddle - React, Tailwind, and code Playground

by hohoya33

HTML

<div class="slide_right open">
<div id="sideMenuContainer" class="side_menu" style="display: none;">


<header><div class="header_inner"><div class="myinfo"><div class="login_befor"><a class="thmb"><img src="https://ssl.pstatic.net/static/m/cafe/mobile/cafe_profile_80.png" alt="프로필 사진" width="40" height="40"></a><a href="#" class="nick join"><span class="ellip">카페에 가입해보세요.</span></a></div><!----><a href="#" aria-label="사이드 메뉴 닫기" role="button" class="close"></a></div><ul class="btn_list"><li class="btn_cafe"><a href="https://m.cafe.naver.com/cafe-home/cafes/join"><span class="tx">내카페</span></a></li><li class="btn_write"><a href="#"><span class="tx">글쓰기</span></a></li><li class="btn_news"><a href="#"><span class="tx">알림설정</span></a></li><li class="btn_talk"><a href="#"><span class="tx">채팅</span></a></li></ul></div></header>

<div class="scroll_h"></div>
</div>
</div>

<div class="dimmed" style="display: none;"></div>

CSS

.dimmed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5)
}

.dimmed.trans {
    background: transparent;
    z-index: 10
}


.slide_right {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    z-index: 9999;
    transform: translate(300px);
    -webkit-transform: translate(300px);
    transition: all .2s ease-in-out 0s;
    -webkit-transition: all .2s ease-in-out 0s;
    background-color: #fff;
}

@media (max-width: 320px) {
    .slide_right {
        width:275px
    }
}

.slide_right.open {
    transform: translate(0);
}

.side_menu {
    position: relative;
    height: 100%;
    padding-top: 128px;
    box-sizing: border-box
}

.side_menu header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 90;
    transform: translateZ(0);
    background: #fff
}

.side_menu .scroll_h {
    overflow-y: auto;
    height: 100%;
    -webkit-overflow-scrolling: touch
}