JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://zana.io/static/css/zbootstrap.6c68c4ca833e.css">
<link rel="stylesheet" href="http://zana.io/static/css/zana.22477052c79d.css">
<nav class="navbar navbar-fixed-top">
<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 src="http://placehold.it/30x30"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Learn</a></li>
<li><a href="#about">Connect</a></li>
<li><a href="#contact">Start Up</a></li>
</ul>
<div class="navbar-right">
<ul class="nav navbar-nav">
<li><a href="/">Sign Up</a></li>
<li><a href="/">Log In</a></li>
</ul>
</div>
</div><!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="row">
<div class="container-fluid">
<h1>Title here.</h1>
<p>Subtitle here.</p>
</div>
</div>
<div class="row">
<div class="hero-start-form">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<form>
<div class="select-container col-xs-4">
<select class="form-control">
<option class="disabled-text" value="default"...
CSS
.navbar-toggle {
border: 1px solid red;
}
.navbar-brand img {
height: 30px;
position: relative;
bottom: 30%;
}
.navbar-right li {
float: left;
position: relative;
}
.jumbotron {
background-image: url('http://placehold.it/1600x900');
background-position: center;
background-size: cover;
height: 430px;
position: relative;
}
.jumbotron h1 {
text-align: center;
font-family: Helvetica Neue;
color: #ffffff;
font-size: 40px;
font-weight: 200;
position: absolute;
top: 40%;
width: 100%;
}
.jumbotron p {
text-align: center;
color: #ffffff;
font-weight: 200;
position: absolute;
top: 50%;
width: 100%;
}
.hero-start-form {
position: absolute;
bottom: 0;
right: 0;
}
.hero-start-form .select-container {
padding: 0;
position: relative;
}
#myCarousel {
display: block;
position: relative;
}
}