JSFiddle - React, Tailwind, and code Playground

by kasperfish

HTML

<div id="nav">
    <a href="#">link1</a>
    <a href="#">link2</a>
    <a href="#">link3</a>
    <a href="#">link4</a>
    <span id="mobile_btn" href="#">☰</span>
</div>

CSS

@media (min-width: 500px) {
#nav a{display:none;}
}

#mobile_btn{
    display: none;
}

#nav{
    width:100%;
    
    background:blue;
    position:relative;
}
#nav a{
    height:30px;
    display:inline-block;
    cursor:pointer;
    background:yellow;
    border-right:1px solid green;
    text-decoration:none;
    padding:8px;
}
#nav a:hover{

    background:orange;

}