JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Main container -->
<div class="page-container">
    
<!-- Navigation Bloc -->
<div class="bloc bgc-2 l-bloc" id="nav-bloc">
	<div class="container bloc-sm">
		<nav class="navbar nav-invert row">
			<div class="navbar-header">
				<a class="navbar-brand" href="index.html"><img src="img/file.png" alt='' /></a>
				<button id="nav-toggle" type="button" class="ui-navbar-toggle navbar-toggle" data-toggle="collapse" data-target=".navbar-1">
					<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
				</button>
			</div>
			<div class="collapse navbar-collapse navbar-1">
				<ul class="site-navigation nav">
				</ul>
			</div>
		</nav>
	</div>
</div>
<!-- Navigation Bloc END -->

<!-- ScrollToTop Button -->
<a class="bloc-button btn btn-d scrollToTop" onclick="scrollToTarget('1')"><icon class="fa fa-chevron-up"></icon></a>
<!-- ScrollToTop Button END-->


<!-- Footer - centerblock -->
<div class="bloc  l-bloc" id="centerblock">
    <div class='border-top'></div>
    <div class='border-bottom'></div>
	<div class="container bloc-lg">
		<div class="row">
			<div class="text-center">
				<a href="index.html" class="btn  btn-d  btn-lg">Button</a>
			</div>
		</div>
	</div>
</div>
<!-- Footer - centerblock END -->

<!-- Footer - footer-bloc -->
<div class="bloc l-bloc " id="footer-bloc">
	<div class="container bloc-md">
		<div class="row">
			<div class="col-sm-4">
				<img class="img-responsive center-block" src="img/star.png" alt='' />
			</div>
			<div class="col-sm-4">
				<img class="img-responsive center-block" src="img/blimp.png" alt='' />
			</div>
			<div class="col-sm-4">
				<img class="img-responsive center-block" src="img/quote.png" alt='' />
			</div>
		</div>
	</div>
</div>
<!-- Footer - footer-bloc END -->

</div>
<!-- Main container END -->

CSS

/*-----------------------------------------------------------------------------------*/
/*	    
/*      Built with Blocs
/*-----------------------------------------------------------------------------------*/

body{
	margin:0;
	padding:0;
    background:#FFF;
    overflow-x:hidden;
    -webkit-font-smoothing: antialiased;
}
a:hover{text-decoration: none; cursor:pointer;}


   


/* Globals type styling */
    h1, h2, h3, h4, h5, h6, p, label, .btn, a{
	font-family:"Helvetica";
}


/* Site container width */

.container{
	max-width:970px;
}

/* Blocs */

.bloc{
	width:100%;
	clear:both;
	background: 50% 50% no-repeat;
	padding;
	0 50px;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}


/* Bloc sizes */

.bloc-lg{
	padding:100px 50px;
}
.bloc-md{
	padding:50px;
}
.bloc-sm{
	padding:20px 50px;
}


/* Bloc - Light theme */

.l-bloc{
	color:rgba(0,0,0,.5);
}
.l-bloc button:hover{
	color:rgba(0,0,0,.7);
}
.l-bloc h1,.l-bloc h2,.l-bloc h3,.l-bloc h4,.l-bloc h5, .l-bloc h6, .l-bloc .ico{
	color:rgba(0,0,0,.7);
}
.l-bloc .icon-round{
	border-color:rgba(0,0,0,.7);
}
.l-bloc .divider-h span{
	border-color:rgba(0,0,0,.1);
}
.l-bloc a{
	color:rgba(0,0,0,.6);
}
.l-bloc a:hover{
	color:rgba(0,0,0,1);
}
.l-bloc .navbar-toggle .icon-bar{
	color:rgba(0,0,0,.6);
}
.l-bloc .btn-wire, .l-bloc .btn-wire:hover{
	color:rgba(0,0,0,.7);
	border-color:rgba(0,0,0,.3);
}


/* Custom bloc styling */

#nav-bloc,#footer-bloc{
	background-color:#ffffff;
}
#centerblock{
	background-color:#f3e8ba;
}

/* Bloc image backgrounds */

.bg-dots-bg{
	background-image:url("img/dots-bg.png");
}

/* NavBar */

.navbar{
	margin-bottom: 0;
}
.navbar-brand{
	height:auto;
	padding:15px 15px;
	font-size:25px!important;
	font-weight:normal;
	font-weight:600;
}
.navbar-brand img{
	width: auto;
	max-height: 200px;
	margin: 0 5px 0 0;
	display:inline;
}
.navbar-brand{
	padding: 15px 15px;
}
.navbar .nav{
	padding-top: 2px;
	margin-right:...