JSFiddle - React, Tailwind, and code Playground

by ciikoo

HTML

<div id='container'>
<div class="top-bar">
    <nav class="top-horizontal">
        <div class="menu-icon"></div>
        <ul class="top-menu">
            <li><a href="">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Blog</a></li>
            <li><a href="">Contact</a></li>
        </ul>
        <div class="clear"></div>
    </nav>
</div>
</div>

CSS

html, body {
    background:#eee;
    margin: 0;
    padding: 0;
}
#container {padding:20px}
.clear { clear: both; }
 
.top-bar {
    padding: 15px 0;
    background: #2d2d2d;
    text-align:center;
}
.top-bar .top-horizontal {
    width: 960px;
    margin: auto;
}
.top-bar .menu-icon {
    display: none;
    cursor: pointer;
    background: url(http://mocca.ideeclic.com/insitu-web-mobile/images/icon-menu.png) no-repeat;
    width: 44px;
    height: 39px;
}
ul.top-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}
ul.top-menu li {
    float: left;
    width: 110px;
    font: normal 13px Arial;
}
ul.top-menu li a {
    color: #fff;
    text-decoration: none;
}

.top-bar .menu-icon {
    ...
    background: url(images/menu-icon.png) no-repeat;
    ...
}

@media only screen and (max-width: 480px) {
 
    .top-bar .menu-icon { display: block; }
    .top-bar .top-horizontal {
        width: 90%;
        min-width: 320px;
    }
    ul.top-menu {
        display: none;
        background: #2d2d2d;
        padding: 20px;
        position: absolute;
        margin-top: 34px;
        color: transparent;
    }
    ul.top-menu:after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border: 15px solid;
        border-bottom-color: #2d2d2d;
        left: 15%;
        bottom: 100%;
        margin-left: -15px;
    }
    ul.top-menu li {
        float: none;
        padding: 8px 0;
    }
}
@media only screen and (min-width: 768px) {
 
    .top-bar .top-menu { display: block !important; }
}

JavaScript

jQuery(document).ready(function($) {
        /* toggle nav */
        $('.menu-icon').on('click', function() {
            $('.top-menu').slideToggle();
        });
    });