JSFiddle - React, Tailwind, and code Playground

by lovromar

HTML

<body style="">
    <header class="nav-header">
    <div class="menu">
            <ul>
                <li><a href="#0">Home</a>
                </li>
                <li><a href="#0">About</a>
                </li>
                <li><a href="#0">Pricing</a>
                </li>
                <li><a href="#0">Gallery</a>
                </li>
                <li><a href="#0">Contact</a>
                </li>
            </ul>
        </div>
    <nav class="header">
        <div id="logo">
            	<h1><a href="#0">SAMPLE MENU</a></h1>

        </div>
        <nav class="menu">
            <ul>
                <li><a href="#0">Home</a>
                </li>
                <li><a href="#0">About</a>
                </li>
                <li><a href="#0">Pricing</a>
                </li>
                <li><a href="#0">Gallery</a>
                </li>
                <li><a href="#0">Contact</a>
                </li>
            </ul>
        </nav>
        
    </nav>
    </header>
    <p>Please resize the browser and view it in mobile for the drop down menu to take effect</p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>
        jQuery(document).ready(function($) {
            $('nav.menu').on('click', function(event) {
                if ($(event.target).is('.menu')) $("div.menu").children('ul').toggleClass('is-visible');
            });
        });
    </script>
    <div id="window-resizer-tooltip" style="display: none;"><a href="#" title="Edit settings" style="background-image: url(chrome-extension://kkelicaakdanhinjdeammmilcgefonfh/images/icon_19.png);"></a><span class="tooltipTitle">Window size: </span><span class="tooltipWidth" id="winWidth">1440</span> x <span class="tooltipHeight" id="winHeight">860</span>
        <br><span class="tooltipTitle">Viewport size: </span><span class="tooltipWidth" id="vpWidth">1440</span> x <span class="tooltipHeight" id="vpHeight">293</span>
   ...

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border:0;
    outline:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline;
    margin:0;
    padding:0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
    display:block
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:0 0;
    text-decoration: none
}
nav ul {
    list-style:none
}
*, *:after, *:before {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
body {
    font-size:100%;
    font-family:Helvetica, arial, sans-serif;
    color: #383838;
}
.header {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:50px;
    background: #83d3c9;
    z-index:2
}
.header:after {
    content:"";
    display:table;
    clear:both
}
.header #logo {
    float:left;
    margin: 0 0 0 22px;
    line-height: 50px
}
.header #logo h1 {
    margin:0;
    padding:0;
    font-size:16px;
    font-size:1em;
    font-weight:500
}
.header a {
    color: white
}
.menu {
    float:right;
    width:44px;
    height:100%;
    cursor:pointer
}
.menu:before {
    font-size:1.5em;
    content:"+";
    line-height:45px;
    color: white
}
div.menu ul {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    -webkit-transform:translateY(-100%);
    -moz-transform:translateY(-100%);
    transform:translateY(-100%);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all...