JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul class="primary-nav">
        <li>item 0,1</li>
        <li>item 0,2</li>
        <li>item 0,3</li>
    </ul>
    <ul class="secondary-nav">
        <li>item 1,1</li>
        <li>item 1,2</li>
        <li>item 1,3</li>
    </ul>
</nav>
<p>Expand and shrink the screen (width) to see the responsive nav.</p>

CSS

nav {}
nav ul {overflow: hidden; margin: 0}
nav ul li {float: left; margin: 0 10px 0 0; padding: 0; list-style: none}

.menu-trigger {display: none; text-align: right; margin-top: 20px}
.mobile-menu {display: none; position: fixed; top: 0; left: -100px; width: 100px; border-right: 1px solid; z-index: 1000; transition: left 0.5s; background-color: #dddddd}
.menu-active {left: 0}

@media only screen and (max-width: 400px){
    nav {display: none}
    .menu-trigger {display: block}
    .mobile-menu {display: block}
}

JavaScript

var menu1 = $('ul.primary-nav').html();
var menu2 = $('ul.secondary-nav').html();

$('body').append('<div class="mobile-menu"><ul class="primary-menu">' + menu1 + '</ul><ul class="secondary-menu">' + menu2 + '</ul></div>');
$('body').append('<a href="#menu" class="menu-trigger">Menu</a>');

$('.menu-trigger').click(function(){
    $('.mobile-menu').toggleClass('menu-active');
})