JSFiddle - React, Tailwind, and code Playground

by captain_theo

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">LOGO HERE!</a>
		</div>

		<!-- Collect the nav links, forms, and other content for toggling -->
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav navbar-right">
				<li><a href="/">Home</a></li>
				<li><a href="#">About Us</a></li>
				<li><a href="#">Services</a></li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Blog <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">Categories</a></li>
						<li><a href="#">Blog Post</a></li>
						<li role="separator" class="divider"></li>
						<li class="dropdown dropdown-submenu">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Search Engines</a>
							<ul class="dropdown-menu">
								<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Google</a>
									<ul class="dropdown-menu">
										<li><a href="https://adwords.google.com" target="_blank">Google Adwords</a></li>
										<li><a href="https://analytics.google.com" target="_blank">Google...

CSS

.dropdown-menu>li>a:hover{
			background-color:rgba(216,216,216,1);
			background-image:none;
			color:#000;
		}
		.divider{
			background-color:#fff;
		}
		.dropdown-submenu{
			position:relative;
		}
		.dropdown-submenu>.dropdown-menu{
			top:0;
			left:100%;
			margin-top:-6px;
			margin-left:-1px;
			-webkit-border-radius:0 6px 6px 6px;
			-moz-border-radius:0 6px 6px 6px;
			border-radius:0 6px 6px 6px;
		}
		.dropdown-submenu>a:after{
			display:block;
			content: " ";
			float:right;
			width:0;
			height:0;
			border-color:transparent;
			border-style: solid;
			border-width:5px 0 5px 5px;
			border-left-color: #cccccc;
			margin-top:5px;
			margin-right: -10px;
		}
		.dropdown-submenu:hover>a:after{
			border-left-color: #555;
		}
		.dropdown-submenu.pull-left{
			float:none;
		}
		.dropdown-submenu.pull-left>.dropdown-menu{
			left:100%;
			margin-left:1-0px;
			-webkit-border-radius:6px 0 6px 6px;
			-moz-border-radius:6px 0 6px 6px;
			border-radius:6px 0 6px 6px;
		}
		.rev{
			left:auto !important;
			right:100% !important;
			top:8px !important;
			margin-right:-12px !important;
		}

JavaScript

(function($){

		/**
		 * Copyright 2012, Digital Fusion
		 * Licensed under the MIT license.
		 * http://teamdf.com/jquery-plugins/license/
		 *
		 * @author Sam Sehnert
		 * @desc A small plugin that checks whether elements are within
		 *       the user visible viewport of a web browser.
		 *       only accounts for vertical position, not horizontal.
		 */
		$.fn.visible = function(partial,hidden,direction,container){

			if (this.length < 1)
				return;

			var $t          = this.length > 1 ? this.eq(0) : this,
							isContained = typeof container !== 'undefined' && container !== null,
							$w				  = isContained ? $(container) : $(window),
							wPosition        = isContained ? $w.position() : 0,
				t           = $t.get(0),
				vpWidth     = $w.outerWidth(),
				vpHeight    = $w.outerHeight(),
				direction   = (direction) ? direction : 'both',
				clientSize  = hidden === true ? t.offsetWidth * t.offsetHeight : true;

			if (typeof t.getBoundingClientRect === 'function'){

				// Use this native browser method, if available.
				var rec = t.getBoundingClientRect(),
					tViz = isContained ?
													rec.top - wPosition.top >= 0 && rec.top < vpHeight + wPosition.top :
													rec.top >= 0 && rec.top < vpHeight,
					bViz = isContained ?
													rec.bottom - wPosition.top > 0 && rec.bottom <= vpHeight + wPosition.top :
													rec.bottom > 0 && rec.bottom <= vpHeight,
					lViz = isContained ?
													rec.left - wPosition.left >= 0 && rec.left < vpWidth + wPosition.left :
													rec.left >= 0 && rec.left <  vpWidth,
					rViz = isContained ?
													rec.right - wPosition.left > 0  && rec.right < vpWidth + wPosition.left  :
													rec.right > 0 && rec.right <= vpWidth,
					vVisible   = partial ? tViz || bViz : tViz && bViz,
					hVisible   = partial ? lViz || rViz : lViz && rViz;

				if(direction === 'both')
					return clientSize && vVisible && hVisible;
				else if(direction === 'vertical')
					return...