JSFiddle - React, Tailwind, and code Playground

by mannemvamsi

HTML

<div class="demo">
<div class="mobile-nav">
    <a href="#" class="nav-btn">Menu</a>
    <ul>
        <li >ITEM 1</li>
        <li >ITEM 2</li>
        <li >ITEM 3</li>
    </ul>
</div>
<div class="desktop-nav">
     <ul>
        <li >ITEM 1</li>
        <li >ITEM 2</li>
        <li >ITEM 3</li>
    </ul>
</div>
</div>

CSS

.demo {
    margin-top:100px;
}
.mobile-nav {
    position:relative;
    display:none;
}
.mobile-nav ul, .mobile-nav .nav-btn  {
    position:absolute;
    right:0;
}
.mobile-nav ul {
    list-style:none;
    display:none;
    padding:10px;
    background-color:#ddd;
}
.mobile-nav ul li {
    padding-top:5px;
    padding-bottom:5px;
}

.desktop-nav ul {
    list-style:none;
    padding:20px;
    background-color:#ddd;
}
.desktop-nav ul li {
    display:inline;
    padding:5px;
    background-color:#fafafa;
    border-radius:3px;
}


@media (max-width: 600px) {
    .desktop-nav {
        display:none;
    }
    .mobile-nav {
        display:block;
    }
}

JavaScript

var navBtn = $('.nav-btn');

navBtn.click(function() {                   
    $('.mobile-nav ul').toggle();
});