JSFiddle - React, Tailwind, and code Playground

by krismeister

HTML

<header>
    <h1>logo area</h1>
<nav>
    <div>menu</div>
<ul>
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    <li><a href="#">four</a></li>
</ul>
<ul>
    <li><a href="#">2 one</a></li>
    <li><a href="#">2 two</a></li>
    <li><a href="#">2 three</a></li>
    <li><a href="#">2 four</a></li>
</ul>

</nav>
</header>

CSS

*{margin:0;padding:0;}

h1{
    background:lightgreen;
    color:#333;
}


nav div{
    background:lightpink;
    color:#333;
    padding:20px;
}
nav ul{
    display:none;
}
nav li{
    padding:10px;
    background:darkgrey;
    color:#fff;
}
nav:hover ul, nav:active ul{
    display:block;
}

@media screen and (min-width:800px){
    h1{
        float:left;
        width:100px;
    }
    nav div{
        display:none;
    }
    nav ul{
        float:right;
        display:block;
        clear:right;
    }
    nav li{
        background:#ccc;
        display:inline-block;
        float:left;
    }
}