JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<title>Preset padrão</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale-1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  	

  	<link rel="stylesheet" href="css/style.css" media="screen">

</head>

<!--BARRA DE NAVEGAÇÃO-->

<body>
	<nav class="navbar navbar-default navbar-fixed-top">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-togle="collpase" data-target="#myNavbar" aria-expander="true">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#myPage">Logo</a>
			</div>

			<div class="navbar-collapse collapse-in" id="myNavbar" aria-expanded="true">
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#sobre">SOBRE</a></li>
					<li><a href="#servicos">SERVICOS</a></li>
					<li><a href="#portifolio">PORTIFOLIO</a></li>
					<li><a href="#precos">PRECOS</a></li>
					<li><a href="#contato">CONTATO</a></li>
				</ul>
			</div>
		</div>
	</nav>

	
	<script src="js/jquery-3.1.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/main.js"></script>

	<div class="jumbotron text-center">
	  <h1>Nome da empresa</h1>
	  <p>Nulla quis lorem ut libero malesuada feugiat....</p>
	  <form class="form-inline">
	    <input type="email" class="form-control" size="50" placeholder="Seu e-mail" required>
	    <button type="button" class="btn btn-success">Inscreva-se</button>
	  </form>
	</div>

	
	<!--CONTAINER SOBRE NÓS-->
	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-8">
				<h2>Sobre nós</h2>
				<h4>Quisque velit nisi,...

CSS

/*Adiciona media queries para centralizar a "coluna do logo" em telas menores que 768px*/
@media screen and (max-width: 768px){

}

/*JUMBOTRON*/


/*COR DE FUNDO NOSSOS VALORES*/

/*ADICIONA UMA COR VERDE A TODOS OS ICONES E CONFIGURA O FONT-SIZE*/

.logo{
	color: #006400;
	font-size: 200px;
}


/*CONTAINER SESSÃO DE SERVIÇOS*/


/*ESTILIZANDO AS THUMBNAILS*/
.thumbnail{
	padding: 0 0 15px 0;
	border: none;
	border-radius: 0;
}

.thumbnail img{
	width: 100%;
	height: 100%;
	margin-bottom: 10px;
}

/*CAROUSEL*/

.carousel-control.right, .carousel-control.left{
	background-color: none;
	color: #006400;
}

.carousel-indicators{
	position: absolute;
	bottom: 10px;
	left: 50%;
	z-index: 15;
	width: 60%;
	margin-left: -30%;
	padding-left: 0;
	text-align: center;
	list-style: none;
}

li{
	display: inline-block;
	height: 10px;
	margin: 1px;
	border: 1px solid @carousel-indicators-border-color;
	border-radius: 10px;
	cursor: pointer;
}

.carousel-indicators li{
	background-color: #006400;
}

.carousel-indicators li.active{
	background-color: #006400;
}

.item h4{
	font-size: 19px;
	line-height: 1.375em;
	font-style: italic;
	margin: 70px 0;
}

.item span{
	font-style: normal;
}

.carousel-inner{
	position: relative;;
	width: 100%;
	overflow: hidden;
	overflow-x: hidden;
	overflow-y: hidden;
}

/*PAINEL DE PREÇOS*/

.panel{
	border: 1px solid #006400;
	border-radius: 0;
	transition: box-shadow 0.5s;
}

.panel:hover{
	box-shadow: 5px 0px 40px rgba(0,0,0, 1.0);
}

.panel-footer .btn:hover{
	border: 1px solid #006400;
	background-color: #fff !important;
	color: #006400;
}

.panel-heading{
	color: #fff !important;
	background-color: #006400 !important;
	padding: 25px;
	border-bottom: 1px solid transparent;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

.panel-footer{
	background-color: #fff;
}

.panel-footer h3{
	color: #aaa;
	font-size: 14px;
}

.panel-footer .btn{
	margin: 15px...