JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>FizzCloud</title>

	<!-- External CSS to include. -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
	<link rel="stylesheet" href="fizzcloud.css" />

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="wrapper">
        <div class="container-fluid">
			<div class="container">
				<div class="row">
					<div class="col-md-6 text-center">
						<h1 class="strong-primary">Sign in to continue to Fizz<b>Cloud</b>.</h1>
					</div>
					<div class="col-md-6 text-center">
						<form role="form">
							<div class="form-group">
								<input type="email" class="form-control" id="signin-email" placeholder="Your email">
							</div>
							<div class="form-group">
								<input type="password" class="form-control" id="signin-password" placeholder="Password">
							</div>
							<button type="submit" class="btn form-control btn-lg btn-success">Sign in</button>
							<div class="form-group"><a href="#" class="text-left">Need help?</a></div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<!-- Footer. -->
	<div class="container-fluid">
		<footer class="footer">
			<div class="inner-wrapper">
				<div class="row">
					<div class="col-md-offset-2 col-md-2">
						<strong>LEARN</strong>
						<ul...

CSS

.navbar-inverse {
    border: solid 1px rgb(12,66,144);
    background: rgb(12,66,144);
}
.navbar-inverse .navbar-nav > li > a {
    color: rgb(176,205,249)
}
.navbar-inverse .navbar-brand {
    color: rgb(176,205,249)
}
.nav .signin {
    top: 0;
    right: 0;
    position: absolute;
}
#fieldMode .popover {
    min-width: 300px;
}
#fieldMode .popover-title {
    color: rgb(255,102,0);
    background: rgb(176,205,249);
}
#fieldMode .popover-content {
    color: rgb(12,66,144)
}
#fieldModePopover {
    display: inline-block;
}
}

.wrapper {
    min-height: 100%;
    margin: 0 auto -4em;
    height: auto !important;
    height: 100%;
}
.footer {
    margin-top: 50px;
    color: rgb(176,205,249);
    border-top: solid 5px    rgb(176,205,249);
    border-radius: 4px;
    background: rgb(12,66,144);
}
.footer .inner-wrapper {
    padding: 3% 15px;
    max-width: 1200px;
    margin: 0 auto;
}
.footer hr {
    border-top-color: rgb(176,205,249)
}
.field-mode {
    color: rgb(255,102,0)
}
.field-mode-header {
    border: solid 3px rgb(255,102,0)
}

.strong-primary {
	color: rgb(12,66,144);
}

.light-primary {
	color: rgb(176,205,249);
}

.secondary {
	color: rgb(100,100,100);
}

.form-control[type='email'],
.form-control[type='password'],
.btn.form-control {
    height: 40px;
}
.jumbotron p.tiny-text {
	font-size: small;
}

@media (min-width:992px) { 
	.text-right-md {
	    text-align: right
	}
}

JavaScript

$('#popoverData').popover();
$('[data-toggle="popover"]').popover({
    container: 'body'
});

$('#fieldModePopover').popover();
$('#fieldModePopover').popover({ 
    content: function() {
      return "Yahtzee!";
    }
});