JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
			<nav class="yamm navbar navbar-default" role="navigation">
				<div class="container">
				    <!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
					        <span class="sr-only">Toggle navigation</span>
					        <span class="icon-bar"></span>
					        <span class="icon-bar"></span>
					        <span class="icon-bar"></span>
						</button>
						<div class="navbar-brand navbar-brand-centered">
							<a href="index.php">Logo</a>
						</div>
				    </div>
				    <!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse" id="navbar-brand-centered">
						<ul class="nav navbar-nav navbar-left">
							<li class="dropdown yamm-fw">
							<a href="#" data-toggle="dropdown" class="dropdown-toggle" tabindex="0">Some Procedure</a>
							<ul class="dropdown-menu">
					                <li>
								<div class="yamm-content">
						                    <div class="row">
										<div class="col-xs-12 col-md-9 col-sm-6 bg1 nopadding">
											<div class="megamenu">
												<h4>Some Text Some Text Some Text </h4>
												<hr />
												<ul>
													<li><span>Some Text Some Text Some Text Some Text Some Text </span></li>
												</ul>
											</div><!-- end mega menu -->
										</div>
									</div>
								</div>
							</li>
							</ul>
							</li>
							<li class="dropdown yamm-fw">
								<ul class="dropdown-menu">
						                <li>
									<div...

CSS

.navbar-inverse .navbar-nav > li > a {
	    color: #ffffff !important;
	    font-size: 12px;
	    font-weight: bold;
	    padding-bottom: 12px;
	    line-height: 14px;
	    padding-left: 20px;
	    padding-right: 20px;
	    padding-top: 12px;
	    text-transform: uppercase;
	}
	.navbar-right,
	.navbar.navbar-inverse,
	.navbar.navbar-default,
	.navbar-inverse .nav,
	.navbar-inverse .navbar-nav {
		margin-bottom:0 !important;
	}
	.navbar {
		min-height: 40px;
	}
	.navbar-default .navbar-nav > li > a,
	.navbar-brand-centered {
		background-color: transparent !important;
	}
	.navbar-inverse li .social {
		margin-left: 10px;
	}
	.testi-item .social i,
	.navbar-inverse li .social i {
		width:20px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		display: inline-block;
		border-radius: 3px;
		margin-top: 9px;
		font-size: 12px;
	}
	.navbar-default {
	    background-color: #ffffff;
	    border: 0 none;
	}
	.navbar.navbar-default {
		min-height: 115px;
	}
	.navbar.navbar-default .navbar-nav > li > a {
		padding-top:45px;
	}
	.navbar-default .navbar-nav > li > a {
	    color: #1f5f79;
	    font-size: 17px;
	    line-height: 20px;
	    position: relative;
	    font-weight: 500;
	}
	.navbar-default .navbar-nav > li > a span {
		display: block;
		font-size: 12px;
		color:#bcbcbc;
	}
	.navbar.navbar-default .navbar-nav > li > a {
	    margin-top: 0;
	    padding-top: 15px;
	}
	.navbar-default .navbar-left > li {
	    border-right: 1px solid #eeeeee;
	    margin-top: 25px;
	}
	.navbar-default .navbar-left > li:last-child {
	    border-right: 0 solid #eeeeee;
	}
	.navbar-default .navbar-right > li {
	    border-right: 1px solid #eeeeee;
	    margin-top: 25px;
	}
	.navbar-default .navbar-right > li:last-child {
	    border-right: 0 solid #eeeeee;
	}
	@media screen and (min-width:768px){
	    .navbar-brand-centered {
	        position: absolute;
	        left: 50%;
	        margin-top: -45px;
	        display: block;
	        width: 160px;
	        text-align:...

JavaScript

$('.dropdown').hover(function() {
		$(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(300);
		}, function() {
		$(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut(300);
	});

	$( "#datepicker" ).datepicker();