JSFiddle - React, Tailwind, and code Playground

by Filly

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container">
		<div class="navbar-brand">
			`THE Name`
		</div>
		<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>

		<div class="collapse navbar-collapse navHeaderCollapse">
			<ul class="nav navbar-nav navbar-right">
				<li class="active">
					<a href="#">Home</a>
				</li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">Products <b class="caret"></b></a>

					<ul class="dropdown-menu" style="padding: 20px 30px;">
						<li>
							<div class="row">
								<ul class="col-sm-2 list-unstyled">
									<li>
										<a href="#" id="">hello</a>
									</li>
									<li>
										<a href="#" id="">world</a>
									</li>
									<li>
										<a href="#" id="">my</a>
									</li>
									<li>
										<a href="#" id="">menu</a>
									</li>
								</ul>
								<ul class="col-sm-2 list-unstyled">
									<li>
										<a href="#">Order Questions</a>
									</li>
									<li>
										<a href="#">Shipping Info</a>
									</li>
									<li>
										<a href="#">About</a>
									</li>
									<li>
										<a href="#">Contact</a>
									</li>
								</ul>
							</div>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</nav>