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>MyApp</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">

	<!-- 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">
			<!-- Header and main nav. -->
			<!-- If in Field Mode, append a "field-mode-header" class to this nav element below. -->
			<nav class="navbar navbar-inverse">
				<div class="navbar-header">
					<a class="navbar-brand" href="#">My<b>App</b></a>
				</div>
				<div>
					<ul class="nav navbar-nav">
						<li>
							<a class="dropdown" data-toggle="dropdown" href="#">Fizz&nbsp;<span class="caret"></span></a>
							<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
								<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Who we are</a></li>
								<li role="presentation"><a role="menuitem" tabindex="-1" href="#">What we do (best)</a></li>
								<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Demo</a></li>
								<li role="presentation"><a role="menuitem" tabindex="-1" href="#">FAQ</a></li>
							</ul>
						</li>
						<li>
							<a class="dropdown" data-toggle="dropdown" href="#">Buzz&nbsp;<span class="caret"></span></a>
							<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
								<li...

CSS

* {
	margin: 0;
}

/*
 *	Colors:
 *		Dark Blue:		rgb(12,66,144)
 *		Light Blue:		rgb(176,205,249)
 */

/*html, body {
	height: 100%;
}*/

html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}


.navbar-inverse {
	background: rgb(12,66,144);
	border: solid 1px rgb(12,66,144);
}

.navbar-inverse .navbar-brand {
	color: rgb(176,205,249);
}

.navbar-inverse .navbar-nav > li > a {
	color: rgb(176,205,249);
}

.nav .signin {
    position:absolute;
    top:0;
    right:0;
}

.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -4em;
}

.footer, .push {
	height: 4em;
	min-height: 200px;
}

.footer {
	color: rgb(176,205,249);
	background: rgb(12,66,144);
	border-top: solid 5px rgb(176,205,249);
	
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 60px;
}

.spacer {
	margin-top: -10px;
}

hr {
	color: rgb(176,205,249);
}

.right-pinned-col {
    position:absolute;
    right: 235px;
}

.field-mode {
	color: rgb(255,102,0);
}

.fieldModePopover{
    width:200px;
    height:250px;    
}

.field-mode-header {
	border: solid 3px rgb(255,102,0);
}

JavaScript

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

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