JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
            <header class="cf">
                <h1><a href="#">LOGO</a></h1>
                <nav>
                    <ul>
                        <li><a href="#">LINK 1</a></li>
                        <li><a href="#">LINK 2</a></li>
                        <li><a href="#">LINK 3</a></li>
                        <li><a href="#">LINK 4</a></li>
                    </ul>
                </nav>
            </header>
            <section>
                <p>CONTENT</p>
            </section>
        </div>
        <script>
            $(document).ready(function() {
                $("nav").naver({
                    animated: true
                });
            });
        </script>

CSS

/*-------------------- reset stylesheet --------------------- */
html, body, div, span, h1, h2, h3, p, a, ul, ol, li, img, article, aside, blockquote, figure, figcaption, footer, header, hgroup, menu, nav, section, time {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, time {
	display: block;
}
a {
	outline: none;
}


/*-------------------- clearfix --------------------- */
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }

/* MAIN */
.wrapper {
    max-width: 860px;
    margin: 0 auto;
}
header {
    width: 100%;
    background: #eee;
}
h1 {
    font-size: 22px;
    float: left;
}
nav {
    float: right;
    width: 96%;
}
nav li {
    list-style-type: none;
    float: left;
    margin-right: 10px;
}



/*
 * Naver Plugin [Formstone Library]
 * @author Ben Plum
 * @version 0.0.7
 *
 * Copyright © 2013 Ben Plum <[email protected]>
 * Released under the MIT License <http://www.opensource.org/licenses/mit-license.php>
 */
 
 	.naver .naver-handle { color: #333; cursor: pointer; display: none; font-size: 14px; height: 30px; line-height: 28px; text-transform: uppercase; 
	 	-webkit-user-select: none;
		   -moz-user-select: none;
		    -ms-user-select: none;
		     -o-user-select: none;
			    user-select: none;
 	}
 	.naver .naver-handle:before { background: url(fs-naver-icon.png) no-repeat center; content: ''; display: block; float: right; height: 15px; margin: 7px 10px 0 0; width: 20px; }
 	.naver .naver-wrapper { height: auto; }
 	.naver .naver-container:after { clear: both; content: "."; display: block; height: 0; line-height: 0; visibility: hidden; }

    nav a { background: #254960; color: #fff; display: block; font-size: 16px; line-height: 40px; margin: 0 1px 0 0; padding: 0 20px; }
nav a:hover { background: #222; }
 	
 	@media screen and (min-width: 741px) {
 		.naver...

JavaScript

/*
 * Naver Plugin [Formstone Library]
 * @author Ben Plum
 * @version 0.0.7
 *
 * Copyright © 2013 Ben Plum <[email protected]>
 * Released under the MIT License <http://www.opensource.org/licenses/mit-license.php>
 */
 
if (jQuery) (function($) {
	
	// Default Options
	var options = {
		animated: false,
		label: true,
		labelClosed: "Navigation",
		labelOpen: "Close"
	};
	
	// Public Methods
	var pub = {
		
		// Activate
		activate: function() {
			return $(this).each(function() {
				$(this).addClass("active")
					   .trigger("close.naver");
			});
		},
		
		// Deactivate
		deactivate: function() {
			return $(this).each(function() {
				$(this).removeClass("active")
					   .trigger("close.naver");
			});
		},
		
		// Destroy
		destroy: function() {
			return $(this).each(function() {
				var data = $(this).data("naver");
				
				data.$handle.remove();
				data.$container.contents()
							   .unwrap()
							   .unwrap();
				
				data.$nav.removeClass("active")
						 .off(".naver")
						 .removeData("naver");
			});
		}
	};
	
	// Private Methods
	
	// Initialize
	function _init(opts) {
		// Settings
		opts = $.extend({}, options, opts);
		
		// Apply to each element
		var $items = $(this);
		for (var i = 0, count = $items.length; i < count; i++) {
			_build($items.eq(i), opts);
		}
		return $items;
	}
	
	function _build($nav, opts) {
		if (!$nav.data("naver")) {
			// EXTEND OPTIONS
			$.extend(opts, $nav.data("naver-options"));
			
			opts.labelClosed = $nav.data("label-closed") || opts.labelClosed;
			opts.labelOpen = $nav.data("label-open") || opts.labelOpen;
			
			if (opts.animated) {
				$nav.addClass("animated");
			}
			
			$nav.addClass("naver")
				.wrapInner('<div class="naver-container" />')
				.wrapInner('<div class="naver-wrapper" />')
				.prepend('<span class="naver-handle">' + ((opts.label) ? opts.labelClosed : '') + '</span>');
			
			opts = $.extend({
				$nav: $nav,
				$container: $nav.find(".naver-container"),
				$wrapper:...