JSFiddle - React, Tailwind, and code Playground

by Mukund Mittal

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
		<nav class="navbar navbar-inverse">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>                        
					</button>
					<a class="navbar-brand" href="#" style="color:#428BCA;">Heading</a>
				</div>
				<div class="collapse navbar-collapse" id="myNavbar">
					<ul class="nav navbar-nav navbar-right" id="nav-right">
						<li class="scroll active"><a href="#section1">Section 1</a></li>
						<li class="scroll"><a href="#section2">Section 2</a></li>
						<li class="scroll"><a href="#section3">Section 3</a></li>
						<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4<span class="caret"></span></a>
							<ul class="dropdown-menu" id="drop-menu">
								<li class="scroll active"><a href="#section41">Section 4-1</a></li>
								<li class="scroll"><a href="#section42">Section 4-2</a></li>
								<li class="scroll"><a href="#">Section 4-3</a></li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</nav>
		<div id="section1"...

CSS

carousel-inner > .item > img, .carousel-inner > .item > a > img {
	width: 100%;
	margin: auto;
	height: 850px;
}
body {
	position: relative;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
#section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
#section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
.navbar {
    position:fixed;
    top:0;
    z-index:10;
    width:100%;
	background-color:black;
	opacity: 0.9;
}
#nav-right>.active{
	background-image:none;
	background-color: #428BCA;
	color: white;
}
#nav-right>.active>li>a, #nav-right>.active>li>a:hover, #nav-right>.active>li>a :focus{
	background-image:none;
	background-color: #428BCA;
	color: white;
 }
#nav-right li a {
	color: #428BCA;
}
#nav-right li a:hover{
	background-color: #428BCA;
	color: white;
}
 #drop-menu > .active > a, #drop-menu > .active > a:hover, #drop-menu> .active > a:focus {
    background-image: linear-gradient(to bottom, #17AA76, #149466);
    background-repeat: repeat-x;
    color: #FFFFFF;
}
#drop-menu li a:hover {
	background-image:none;
    background-color:#16A170;
 }
 #drop-menu li a{
	background-image:none;
    color: black;
 }