JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Bootstrap Example</title>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" type="text/css" href="portfolio.css">
 	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 	<script src="portfolio.js"></script>
</head>

<body data-spy="scroll" data-target=".navbar" data-offset="40">

	<!-- Jumbotron -->
	<div class="jumbotron text-center img-responsive" id="jumbotron">
		<div id="jumbotron-header">
			<h1>test</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo</p>
		</div>
	</div>

	<!-- End Jumbotron, begin Nav Bar -->

	<div class="navbar navbar-fixed-top">

		<div class="navbar-header">
     		<a class="navbar-brand" id="nav-name" href="#jumbotron">First & Last</a>
    	</div>
		<ul id="nav-list">
			<li><a href="#portfolio">Portfolio</a></li>
			<li><a href="#about">About</a></li>
			<li><a href="#contact">Contact</a></li>
		</ul>
	</div>

	<!-- End Nav bar -->
	
	<div class="container-fluid">

		<!-- Begin portfolio section -->

		<div id="portfolio" class="container-fluid">
			<h1>Portfolio</h1>
			<div class="row" >
				<div class="col-sm-4" id="portfolio1">
      				<h3>Column 1</h3>
      				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      				<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    			</div>
    			<div class="col-sm-4" id="portfolio2">
      				<h3>Column 2</h3>
      				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      				<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    			</div>
    			<div class="col-sm-4" id="portfolio3">
      				<h3>Column 3</h3>
     ...

CSS

body {
	width: 100%
	height: 100%;
	background-color: #FFFFF0 !important;
	position: relative;
}

/* NAV & JUMBOTRON */

.jumbotron {
	background: url(images/jumbo.png) no-repeat center;
	background-size: cover;
	min-width: 100%;
	min-height: 100vh;
	margin-bottom: 0 !important;

}

#jumbotron-header{
	height: inherit;
	padding-top: 50%;
}

.navbar {
	text-align: right;
}

#nav-list {
	padding: 20px 0px;
}

#nav-name {
	color: red;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 40px;
}

/* Add background color to navbar on scroll --> add id #nav-background to div.navbar */

.nav-background {
	background-color: #FFFFF0;
}


#nav-list li {
	display: inline;
	margin-right: 40px;
}


/* END NAV & JUMBOTRON */

div.container-fluid {
	padding: 0;  /* Remove gutter space from left and right of columns */
}

/* PORTFOLIO */

#portfolio,
#about,
#contact, 
#footer {
	padding: 50px; /* Padding around text content */
}

#portfolio {
	background-color: red;
}

#about {
	background-color: black;
	color:white;
}

#contact {
	background-color: yellow;
}

/* FOOTER */

#footer {
	padding: 10px 50px;
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}