JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<ul class="nav">
    <li><a class="btn">&#9776;</a>
        <ul class="menu">
            <li><a href="/">Home</a></li>
            <li><a href="/portfolio">Portfolio</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </li>
</ul>

CSS

body { margin: 0; font-family: sans-serif; font-size: 1.1em; line-height: 1em; } 

ul { margin: 0; padding: 0; list-style: none; overflow: hidden;; background-color: #666; } 
ul .btn { display: none; cursor: pointer; } 
ul li { float: left; } ul li a { display: block; padding: 15px 0 15px 20px; text-decoration: none; color: #bbb; } 
ul li a:hover { color: #fff; } @media (max-width: 30em) { ul li { float: none; } ul .btn { display: block; } 
ul .menu li a { padding: 0px 20px 10px 20px; } 
ul .menu { display: none; } ul li:hover .menu { display: block; } }