JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->

    <meta charset="utf-8">

	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="styles.css" media="screen" />

    <title>Hello, world!</title>
  </head>
  <body>


	<div class="containerWrap">
	  <div class="header defaultContainer">
	  	<div class="container-fluid h-100">
			<div class="row h-100 align-items-end">
				<div class="col-4 logo">
					<img src="https://logosbynick.com/wp-content/uploads/2018/03/final-logo-example.png"/>
				</div>
				<div class="col-2"></div>
				<div class="col-6 text-align-right">
					<a href="#">one</a>
					<a href="#">two</a>
					<a href="#">three</a>					
					<a href="#">four</a>
					<a href="#">five</a>
				</div>
			</div>
		</div>
	  </div>
	  <div class="centerContainer h-100 bg-secondary text-white">
		


<div id="carouselExampleControls" class="h-100 carousel slide" data-ride="carousel">
  <div class="carousel-inner h-100">
    <div class="carousel-item active h-100 ">
      <div class="img bg-info h-100 " style="background-image: url(test.jpg);">
		<div class="text h-100">first image</div>
	  </div>
    </div>
    <div class="carousel-item h-100">
      <div class="img bg-warning h-100" style="background-image: url(test1.jpg);">
		<div class="text h-100">second image</div>
	  </div>
    </div>
    <div class="carousel-item h-100">
      <div class="img bg-success h-100" style="background-image: url(test2.jpg);">
		<div class="text h-100">third image</div>
	  </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span...

CSS

html, body, .containerWrap{
    height: 100%;
    display: flex;
    flex-direction: column;
    background: red;
    margin: 0;
}
.containerWrap {
	display:flex;
	flex-flow: column nowrap;
	background-color:blue;
}

.defaultContainer {
	flex:none;
	background-color:black;
	color:white;
}

.centerContainer {
	flex:auto;
	background-color:yellow;
	overflow-y: auto;
}

.header{
	height: 95px;
}

.header .row  .col{
	
}

.footer{
	height: 65px;
}

.text-align-right{
	text-align: right;
}

.logo img{
	height: 85px;
}
.carousel-item .img{	
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	text-align: center;
}

.carousel-item .img .text{
	color: #000;
	background-color: #FFC;	
	vertical-align: middle;
	opacity: 0.8;
}