JSFiddle - React, Tailwind, and code Playground

HTML

<header>
	<nav id="nav-LLC" class="navbar navbar-default ">
		<div class="container">
			<div class="navbar-header">
				<div class="navbar-brand">
					<a  id="brand-name" href="index.html" ><h1> Food,LLC </h1></a>
				</div>
					
				<div class="button-class">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapsable" aria-expanded="false" >
					<span class="sr-only"> Toggle Navigation</span>
					<span class="icon-bar"></span> <!--Icon Bar is three lines in the icon-->
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					</button>
				</div>
		
			</div><!-- Navbar-header -->
			<section class="visible-xs">
			<div id="nav-collapsable" class="collapse navbar-collapse" >
				<ul id="nav-list"  class="nav navbar-nav navbar-right">
					<li><a href="#chicken"><span>Chicken</span></a></li>
					<li><a href="#beef"><span>Beef</span></a></li>
					<li><a href="#sushi"><span>Sushi</span></a></li>
					<!--<li><a href="#"><span>Cookies</span><br></a></li>-->
				</ul>
			</div>
			</section>
		</div>
	</nav>
</header>



<div class="container">
<h2>Our Menu</h2>
<div class="row">
<section id="chicken" class="col-md-4 col-sm-6 col-xs-12">
<h4>Chicken</h4>
<p>Do qui nulla et ullamco ut quis excepteur nulla amet. Eiusmod dolore tempor deserunt velit in nulla dolore ut duis dolor. Lorem ipsum duis ea ut occaecat cupidatat sint incididunt laborum ut duis ea cillum excepteur nulla velit ut. Veniam adipisicing proident esse tempor aliquip non nulla laboris esse dolore fugiat nostrud eu nulla consequat ut qui ad. Amet ad sint pariatur aliquip tempor mollit labore minim voluptate fugiat non.<a class="visible-xs" href="#nav-LLC" ><br>Back to top</a></p>
</section>

<section id="beef" class="col-md-4 col-sm-6 col-xs-12">
<h4>Beef</h4>
<p>Do qui nulla et ullamco ut quis excepteur nulla amet. Eiusmod dolore tempor deserunt velit in nulla dolore ut duis dolor. Lorem ipsum duis ea ut occaecat cupidatat...

CSS

/*html
{
	overflow-x: hidden;
	overflow-y: scroll;
}*/
body{
	font-family: 'Comfortaa', cursive;
}
/*Header Section*/
#brand-name{
	position: relative;
	bottom:20px;
	left: 1px;
	text-decoration:none;
}
.nav-LLC{
	border-radius: 0px;
}


}
#nav-list{
	margin-top: 10px;
}
#nav-list a {
  text-align: center;
  background-color: #e1e6ed;
  font-size: 1.1em;
  font-weight: bolder;
}
#nav-list a:hover{
	background-color: #96d4e8;
}
/*End of Header Section*/

/* Only for Extra Small Devices*/

@media (max-width: 500px){
	h1{
		font-size: 7vw;
	}
	h2{
		font-size: 7vw;
	}
}

/*Start of Body Section*/ 
h2{
	margin-top: 10px;
	margin-bottom: 20px;
	text-align: center;
	font-weight: bold;
	font-color: #0b0821;
}
.row section{
	
}
.row section p{
	text-align: justify;
	background-color: #e1e6ed;
}
h4{
	position: relative;
	left: 40%;*/
	font-weight: bold;
	color: #0b2730;
	/*background-color: #e1e6ed;
	margin: 0px;*/
}
/*End of Body Section*/