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="container-fluid">
		<div class="row">
			<div class="col-md-12 text-center">
				<h1 style="text-align: center;">
					<span class="glyphicon glyphicon-user secondary" style="display: block"></span>
					<span class="strong-primary">Who's using Fizz<b>Cloud</b>?</span>
				</h1>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12 text-center">
				<img src="placeholder.png"/>
				<img src="placeholder.png"/>
				<img src="placeholder.png"/>
				<img src="placeholder.png"/>
				<img src="placeholder.png"/>
				<img src="placeholder.png"/>
			</div>
		</div>
	</div>
	
	<!-- Scripts to include. -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<script src="fizzcloud.js"></script>
</body>
</html>

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
	}
}