JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<nav>      
    <input type="checkbox" name="menu" id="btn-menu" />
    <label for="btn-menu">btn menu</label> 
    <ul>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
    </ul>
</nav>

CSS

nav{
    background: #000;
    padding: 15px 10px;   
    color: #fff;
    font-family: 'Segoe UI', sans-serif;
    text-align: center;
}
nav li{
    display: inline-block;
    vertical-align: top;
}
nav a{
    color: #fff;
    padding: 5px 10px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: 0.3s;
}
nav a:hover{
    border: 1px solid #fff;
}

input[type="checkbox"] {
    display: none;
}
nav label {    
    display: none;
    border: 1px solid #fff;   
    padding: 5px 10px;
    cursor: pointer;
    transition: 0.3s;
}
nav label:hover{
    color: #f00;
    border: 1px solid #f00;
}


@media screen and (max-width: 500px) {
    
    nav label{
         display: inline-block;
    }
    nav > ul {
        display: none;
    }
    input[type="checkbox"]:checked ~ label + ul {
        display: block;
    }
    
}