JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="MSA-masthead MSA-masthead-grad" >

			<div class="container" >

				<nav class="MSA-nav" >
					<a class="MSA-nav-item active" href="home.html" ><img src="http://lorempixel.com/g/240/20/" width="250" ></a>
					<span class="pull-right">
						<a class="MSA-nav-item " href="#" >FAQ</a>
						<a class="MSA-nav-item " href="#" >Login</a>
					</span>
				</nav>

			</div>

		</div>

		<div class="container" style="margin-top:40px" >

			<div class="row" >

				<div class="col-sm-12" >

					<div id="carousel-msa" class="carousel slide" data-ride="carousel">
						<!-- Indicators -->
						<ol class="carousel-indicators">
							<li data-target="#carousel-msa" data-slide-to="0" class="active"></li>
							<li data-target="#carousel-msa" data-slide-to="1"></li>
							<li data-target="#carousel-msa" data-slide-to="2"></li>
						</ol>

						<!-- Wrapper for slides -->
						<div class="carousel-inner" role="listbox">
							<div class="item active">
								<div class='inner-item'>
                <!--
                  SO solution NOT working here... http://stackoverflow.com/questions/10591422/bootstrap-carousel-image-doesnt-align-properly
                -->
									<img class="img-responsive center-block" src="http://lorempixel.com/1200/560/sports/1/Dummy-Text/" alt="carousel caption 1">
									<div class="carousel-caption">
										carousel caption 1
									</div>
								</div>
							</div>
							<div class="item">
								<div class='inner-item'>
									<img class="img-responsive center-block" src="http://lorempixel.com/1200/560/sports/2/Dummy-Text/" alt="carousel caption 2">
									<div class="carousel-caption">
										carousel caption...

CSS

@import url(https://fonts.googleapis.com/css?family=Archivo+Narrow:400,700);
/*
* Globals
*/

body {
	font-family: "Archivo Narrow",Helvetica,Arial,sans-serif;
    background-color: #222;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
	margin-top: 0;
	font-family: "Archivo Narrow",Helvetica,Arial,sans-serif;
    font-weight: normal;
	color: #000;
}


/*
* Override Bootstrap's default container.
*/

@media (min-width: 1200px) {
	.container {
		width: 1200px;
	}
}

.content1 {
	background-color: #fff;
	min-height: 600px;
}


/*
* Masthead for nav
*/

.MSA-masthead {
	border-bottom: 1px solid rgba(200, 200, 200, 0.1);
	box-shadow: 0 28px 24px -20px #000 inset;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 200;
	height: 40px;
}

.MSA-masthead-grad {
	background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 100%) repeat scroll 0 0;
}

.MSA-masthead-solid {
	background-color: #000;
}

/* Nav links */

.MSA-nav-item {
	position: relative;
	display: inline-block;
	padding: 8px 10px;
	font-weight: bold;
	font-size: 16px;
	color: #fff;
}

.MSA-nav-item:hover,
.MSA-nav-item:focus {
	color: #cdddeb;
	text-decoration: none;
}


/* Active state gets a caret at the bottom */

.MSA-nav .active {
	color: #FEC30E;
}

.MSA-nav .active:after {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	margin-left: -5px;
	vertical-align: middle;
	content: " ";
	border-right: 5px solid transparent;
	border-bottom: 5px solid;
	border-left: 5px solid transparent;
}


/*
* SA name and description
*/

.MSA-header {
	padding-top: 20px;
	padding-bottom: 20px;
}

.MSA-title {
	margin-top: 30px;
	margin-bottom: 0;
	font-size: 60px;
	font-weight: normal;
}

.MSA-description {
	font-size: 20px;
	color: #999;
}

.MSA-topSpacer {
	padding-top: 30px;
}


/*
* Main column and sidebar layout
  line-height: 1.5;
*/

.MSA-main {
	font-size: 18px;
	padding-left: 2%;
	padding-right: 2%;

}


/* Sidebar modules for boxing...