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="jumbotron">
				<div class="container">
					<div class="row">
						<div class="col-md-9">
							<h1 class="heading"><b>A modern online community for the fizz world.</b></h1>
							<p class="subheading">
								Request, assign, conduct, review and submit fizzes, all from a<br/>
								cloud-based platform. <b>Free to join.</b>
							</p>
						</div>
						<div class="col-md-3">
							<p>&nbsp;</p>
							<form role="form">
								<div class="form-group">
									<input type="email" class="form-control" id="signup-email" placeholder="Your email">
								</div>
								<div class="form-group">
									<input type="password" class="form-control" id="signup-password" placeholder="Create a password">
									<p class="tiny-text">Use at least one lowercase letter, one numeral and seven characters.
								</div>
								<div class="checkbox">
									<label>
										<input type="checkbox"> I agree to the <a href="#">terms of service</a> and <a href="#">privacy...

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

/* Form attempts. */
.tiny-text {
	font-size: x-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!";
    }
});