JSFiddle - React, Tailwind, and code Playground

by jokokoloko

HTML

<link rel="stylesheet" href="http://cede0.com/fiddle/public/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cede0.com/fiddle/public/assets/css/bootstrap-glyphicons.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cede0.com/fiddle/public/assets/js/bootstrap.min.js"></script>
<body>
	<!-- CONTROL -->
	<div id="control">
		<!-- HEADER -->
		<header class="navbar navbar-inverse navbar-fixed-top" role="banner">
			<div class="container">
				<div class="navbar-header">
					<button class="navbar-toggle left" type="button" data-toggle="collapse" data-target=".navbar-header-collapse">
						<span class="sr-only">Toggle</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a href="#" class="navbar-brand">Factory</a>
				</div>
				
				<nav class="collapse navbar-collapse navbar-header-collapse" role="navigation">
					<ul class="nav navbar-nav">
						<li><a href="#">Dashboard</a></li>
						<li><a href="#">Profile</a></li>
					</ul>
				</nav>
				
				<!-- SWITCH -->
				<ul class="nav navbar-nav pull-right">
					<!-- DROPDOWN -->
					<li class="dropdown">
						<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> <span>User</span> <b class="caret"></b></a>
						<ul class="dropdown-menu" role="menu" aria-labelledby="account">
							<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Settings</a></li>
							<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Help</a></li>
							<li role="presentation" class="divider"></li>
							<li role="presentation"><a role="menuitem" tabindex="-1" href="logout">Log Out</a></li>
						</ul>
					</li>
					<!-- /DROPDOWN -->
				</ul>
				<!-- /SWITCH -->
			</div>
		</header>
		<!-- /HEADER -->
	</div>
	<!-- /CONTROL -->
</body>

CSS

.navbar-header {
    text-align: center;
    }
.navbar-toggle.left {
    float: left;
    }
@media (max-width: 767px) {
    .navbar-brand {
        float: none;
        }
    .navbar-nav.pull-right {
        margin: 0;
        padding: 0;
        width: auto;
        position: absolute;
        top: 0;
        right: 0;
        }
    .navbar-nav > li > a {
        -webkit-border-radius: 0;
           -moz-border-radius: 0;
                border-radius: 0;
        }
    }