JSFiddle - React, Tailwind, and code Playground

by Adrian Carriger

HTML

<div class="header">
    <div class="navbar">
<a href="" class="in" style="display: inline-block;"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;" xml:space="preserve">
<path style="fill:#545454;" d="M42.7,122.7H21.3V54h21.4V122.7z M32,44.6c-6.8,0-12.4-5.6-12.4-12.4c0-6.8,5.5-12.4,12.4-12.4
c6.8,0,12.4,5.5,12.4,12.4C44.4,39,38.9,44.6,32,44.6z M122.7,122.7h-21.3V89.3c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6
v34H56.1V54h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1c21.6,0,25.6,14.2,25.6,32.7V122.7z"/>
<g>
<path style="fill:#FFFFFF;" d="M151.9,120c0.7-0.1,1-0.5,1-1.1c0-0.8-0.5-1.1-1.4-1.1H150v4h0.6V120h0.7l0,0l1.1,1.7h0.6L151.9,120
    L151.9,120z M151.3,119.6h-0.7v-1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C152.4,119.5,151.9,119.6,151.3,119.6z"/>
<path style="fill:#FFFFFF;" d="M151.3,116c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8c2.1,0,3.8-1.7,3.8-3.8
    C155.2,117.6,153.5,116,151.3,116z M151.3,123.1c-1.8,0-3.3-1.4-3.3-3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3
    C154.6,121.7,153.2,123.1,151.3,123.1z"/>
</g>
</svg>
</a>

<a href="" class="logo" style="display: inline-block;">Logo </a>

<a id="toggle-menu">
<div> 
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>

    </div>
    <div class="nav">
        <div id="navigation">
            <div class=""></div>
            <ul>
                <li class="navlist"><a href="" style="display: inline-block; width:100%;">Home</a>

                </li>
                <li class="navlist"><a href="#panel9" style="display: inline-block; width:100%;">About</a>

                </li>
                <li class="navlist"><a href="#panel2" style="display: inline-block; width:100%;">Work</a>

                </li>
                <li class="navlist"><a href="#panel8" style="display: inline-block; width:100%;">Contact</a>

               ...

CSS

/*global styles*/
 body {
    width: 100%;
    margin: 0;
    list-style: none;
    text-decoration: none;
    font-size:1.05em;
    font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a {
    appearance: none;
    font-size:1.05em;
    font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
    background:transparent;
    color: #000000;
    border:none;
    letter-spacing:0.15em;
    text-transform:uppercase;
    transition: color 0.5s ease;
    list-style: none;
    text-decoration: none;
}
a:focus, a:hover {
    color: #e6e8eb;
    cursor:pointer;
    transition: color 0.5s ease;
}
a:active {
    color: #484747;
}
/*----/----global styles*/

/*navigation icon*/
 #toggle-menu {
    float:right;
    display: block;
    width: 15px;
    height: 15px;
    padding: 20px;
}
#toggle-menu div {
    width: 15px;
    height: 15px;
    position: relative;
}
#toggle-menu span {
    display: block;
    width: 15px;
    height: 3px;
    background: #545454;
    position: absolute;
    -webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
    -moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
    transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    transform-origin: center;
}
#toggle-menu span.top {
    top: 0px;
}
#toggle-menu span.middle {
    top: 6px;
}
#toggle-menu span.bottom {
    top: 12px;
}
/*----/----navigation icon*/

/*navigation background transition*/
 .bg {
    background-color: #fff !important;
    border-bottom: 5px solid rgba(0, 0, 0, 0.2);
}
.show {
    opacity: 1;
}
.navfade {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.down {
    top: 150px;
}
.up {
    top: 1800px;
}
/*----/----navigation...

JavaScript

/*navigation icon animation*/
var trigger = 'X';

jQuery(document).ready(function () {
    $('#toggle-menu').click(function () {
        trigger = 'X';
        $(this).toggleClass('menu-is-active')

    });

    /* click outside of nav to trigger navigation icon animation*/
    $(document).click(function () {


        if (trigger == 'X') {
            $("#toggle-menu").toggleClass();
            trigger = 'ham';
        }



    });
    $("nav").click(function (e) {
        e.stopPropagation();
        return false;
    });

    /*----/----navigation icon animation*/

    /*toggle menu*/
    jQuery("#toggle-menu").click(function () {
        jQuery(".nav").slideToggle();
    });
    /* click outside of nav to close toggle*/
    $(document).click(function () {
        $(".nav").hide();
    });
    $("#toggle-menu").click(function (e) {
        e.stopPropagation();
        return false;
    });
    /*----/----toggle menu*/


    /*Jump Scroll*/
    $(function () {
        var $window = $(window),
            $document = $(document),
            transitionSupported = typeof document.body.style.transitionProperty === "string",
            scrollTime = 1; // scroll time in seconds

        $(document).on("click", "a[href*=#]:not([href=#])", function (e) {
            var target, avail, scroll, deltaScroll;

            if (location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") && location.hostname == this.hostname) {
                target = $(this.hash);
                target = target.length ? target : $("[id=" + this.hash.slice(1) + "]");

                if (target.length) {
                    avail = $document.height() - $window.height();

                    if (avail > 0) {
                        scroll = target.offset().top;

                        if (scroll > avail) {
                            scroll = avail;
                        }
                    } else {
                        scroll = 0;
                    }

             ...