JSFiddle - React, Tailwind, and code Playground
by Mario Cuollo Conforti
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<nav class="navbar default-nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="/"> <img alt="#{site_title}" src="http://2.228.86.3:8080/images/quipark_logo_white.png" /></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav nav-pills navbar-right">
<li><a href="/faq">FAQ</a></li>
<li><a href="/about">Chi Siamo</a></li>
<li><a href="/contacts">Contatti</a>
</li>
<li></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="loginButton">Accedi</a>
<ul id="login-dp" class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-12">
<form action="/" method="post" class="form">
<div class="form-group">
<label class="sr-only" for="form-username">Username</label>
<input type="text" id="username" name="email" placeholder="Email..." class="form-username form-control" />
</div>
<div class="form-group">
<label class="sr-only" for="form-password">Password</label>
<input type="password" name="password" placeholder="Password..." class="form-password form-control" id="password" />
<div class="help-block text-right">
<a href="/resetPassword"> <span class="login-link">Password dimenticata?</span>
</a>
</div>
</div>
<div class="form-group">
<button...
CSS
.navbar {
min-height: 130px;
line-height: 130px;
z-index: 1;
height: 130px;
}
.default-nav{
background-color: #004999;
}