JSFiddle - React, Tailwind, and code Playground

by Slico

HTML

<div class="background-image"></div>
<div class="Heading">
    <div class="Oregon">
        <div class="HurtMoldLeft"><i> Your </i></div> Phrase
        <br> With a
        <div class="HurtMoldRight"><i> Display. </i></div>
    </div>
</div>
    <div id='cssmenu' >
    <ul>
        <li class='active'><a href='#'>Home</a></li>
        <li><a href='#'>Products</a></li>
        <li><a href='#'>Company</a></li>
        <li><a href='#'>Contact</a></li>
    </ul>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Raleway);
    #cssmenu,
    #cssmenu ul,
    #cssmenu ul li,
    #cssmenu ul li a,
    #cssmenu #menu-button {
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
        line-height: 1;
        display: block;
        position: relative;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    #cssmenu:after,
    #cssmenu > ul:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }

    #cssmenu #menu-button {
        display: none;
    }

    #cssmenu {
        width: auto;
        font-family: Raleway, sans-serif;
        line-height: 1;
    }

    #cssmenu > ul {
        background: #3db2e1;
    }

    #cssmenu > ul > li {
        float: left;
        -webkit-perspective: 1000px;
        -moz-perspective: 1000px;
        perspective: 1000px;
    }

    #cssmenu.align-center > ul {
        font-size: 0;
        text-align: center;
    }

    #cssmenu.align-center > ul > li {
        display: inline-block;
        float: none;
    }

    #cssmenu.align-right > ul > li {
        float: right;
    }

    #cssmenu > ul > li > a {
        padding: 16px 20px;
        font-size: 14px;
        color: #ffffff;
        letter-spacing: 1px;
        text-transform: uppercase;
        text-decoration: none;
        background: #3db2e1;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        -webkit-transform-origin: 50% 0;
        -moz-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    #cssmenu > ul > li.active > a {
        color: #dff2fa;
    }

    #cssmenu > ul > li:hover > a,
    #cssmenu > ul > li >...

JavaScript

(function($) {

        $.fn.menumaker = function(options) {

            var cssmenu = $(this),
                settings = $.extend({
                    title: "Menu",
                    format: "dropdown",
                    breakpoint: 768,
                    sticky: false
                }, options);

            return this.each(function() {
                cssmenu.find('li ul').parent().addClass('has-sub');
                if (settings.format != 'select') {
                    cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
                    $(this).find("#menu-button").on('click', function() {
                        $(this).toggleClass('menu-opened');
                        var mainmenu = $(this).next('ul');
                        if (mainmenu.hasClass('open')) {
                            mainmenu.hide().removeClass('open');
                        } else {
                            mainmenu.show().addClass('open');
                            if (settings.format === "dropdown") {
                                mainmenu.find('ul').show();
                            }
                        }
                    });

                    multiTg = function() {
                        cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
                        cssmenu.find('.submenu-button').on('click', function() {
                            $(this).toggleClass('submenu-opened');
                            if ($(this).siblings('ul').hasClass('open')) {
                                $(this).siblings('ul').removeClass('open').hide();
                            } else {
                                $(this).siblings('ul').addClass('open').show();
                            }
                        });
                    };

                    if (settings.format === 'multitoggle') multiTg();
                    else cssmenu.addClass('dropdown');
                } else if (settings.format ===...