JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<head runat="server">
	<title></title>
</head>
<body>
	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">asdfasdf.com</a>
			</div>
			<div id="navbar" class="navbar-collapse collapse">
				<ul class="nav navbar-nav navbar-center">
					<li><a href="../Default.aspx">Home</a></li>
					<li><a href="../Pages/About.aspx">About</a></li>
					<li class="active"><a href="../Pages/Applications.aspx">Applications</a></li>
				</ul>
			</div>
		</div>
	</nav>
	<div class="container-fluid body-container col-lg-12">
		<div class="row">
			<div class="container-fluid ribbon-container">
				Ribbon
			</div>


			<div class="content-container">
				<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi praesentium totam, id sunt officiis et beatae laborum aspernatur voluptas modi explicabo mollitia quasi facilis distinctio iste earum consequatur voluptates facere!</div>
				<div>Porro doloribus quae ipsam alias ipsum consectetur voluptatibus vitae nesciunt, natus labore asperiores illum non? Officia illum reprehenderit aspernatur omnis, voluptates veritatis itaque sit, non fugiat earum dolor quisquam ab.</div>
				<div>Et animi accusamus earum deserunt expedita iusto vitae dolore, adipisci possimus soluta ullam excepturi illo officiis eius odit nisi corporis praesentium. Esse ducimus,...

SCSS

body {padding-top: 51px;}
html, body {
	background-color: rgb(48, 48, 48);
	height: 100%;
}

.body-container {
	background-color: red;
  height: 100%;
  
  .row {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
  }
}

.ribbon-container {
	background-color:aqua;
	flex: 0 0 50px;
  width: 100%;
}

.content-container {
	background-color: yellow;
	flex: 1;
  overflow: auto;
}

.footer-container {
	background-color: pink;
	display: flex;
	flex: 0 0 50px;
}