JSFiddle - React, Tailwind, and code Playground

by dswitzer

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div>
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
	<div class="container-fluid">
      <div class="navbar-header">
        <a href="#">Brand</a>
      </div>
      <div>
        <ul class="nav navbar-nav">
          <li class="active">
          	<a href="#">Home</a>
          </li>
        </ul>
      </div>
	</div>
	</nav>
  <div>
    <div class="container page-container-scrollable" style="padding-top: 1em; padding-bottom: 1em;">
      <form role="form">
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input autofocus="" type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address 1</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password 1</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address 2</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password 2</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address...

CSS

.footer {
background: none repeat scroll 0 0 #f5f5f5;
border-top: 1px solid #e5e5e5;
bottom: 0;
height: 45px;
left: 0% !important;
line-height: 40px;
position: fixed;
right: 0;
text-align: center;
width: 100% !important;
z-index: 999;
}

.page-container-scrollable {
	height: 100vh;
	width: 100vw;
	overflow: auto;
	border-top: 50px transparent solid;
	border-bottom: 50px transparent solid;
}