JSFiddle - React, Tailwind, and code Playground

by Pradeep karn rajput

HTML

<div id="menu-mobile"><span class="bt-menu">Menu</span>
    <input type="text"/>
</div>

CSS

#menu-mobile {
    background: none repeat scroll 0 0 #343434;
    color: #a6abab;
    display: block;
    font-size: 13px;
    line-height: 36px;
    min-height: 100%;
    position: absolute;
    transition: right 0.25s ease-out 0s;
    width: 250px;
    z-index: 1000;
    left:70px;
    transition: 1s;
}

#menu-mobile .bt-menu:before, #menu-mobile .bt-menu:after {
    border-bottom: 4px solid #888;
    border-top: 4px solid #888;
    content: "";
    display: block;
    height: 5px;
    left: 22px;
    position: absolute;
    top: 21px;
    width: 22px;
}

#menu-mobile .bt-menu:after {
    border-bottom: 0 none;
    border-top: 4px solid #888;
    left: 22px;
    top: 39px;
}
#menu-mobile .bt-menu {
    background: none repeat scroll 0 0 #343434;
    cursor: pointer;
    height: 68px;
    left: -66px;
    overflow: hidden;
    position: absolute;
    text-indent: -23em;
    top: 0px;
    transition: all 0.25s ease-out 0s;
    width: 66px;
}

JavaScript

$(".bt-menu").toggle(
    function(){$("#menu-mobile").css({"left":"270px"});},
    function(){$("#menu-mobile").css({"left":"70px"});}   
  );