JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navbar">
    <ul>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
        <li><a href="#">Link4</a></li>
    </ul>
</div>

<button class="btn-toggle">Toggle</button>

CSS

.btn-toggle{
    display: none;
}
#navbar{
    width: 100%;
    background: #444;
    padding: 10px;
}

#navbar ul li{
    list-style: none;
    display: inline;
}

#navbar ul li a{
    color: #FFF;
    padding: 10px;
    text-decoration: none;
}

@media (max-width: 1024px) {
  #navbar{display: none;}
  .btn-toggle{display: block;}
}