JSFiddle - React, Tailwind, and code Playground

HTML

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

</script>
</head>
<body>

<nav class="navbar navbar-default" id="navbar">
  <div class="container-fluid" id="container-fluid1">
    <div class="navbar-header" id="websiteName">
      <a class="navbar-brand" href="#">Richazon</a>
    </div>
    <div id="theLinks">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
			<a href="#" data-toggle="dropdown" class="dropdown-toggle">Navbar Color <b class="caret"></b></a>
				<ul class="dropdown-menu" id="dropdown-menu1">
					<li id="greenBg"><a href="#" onclick="changeNavbarColor('greenBg')">Makes the navbar green </a></li>
					<li id="orangeBg"><a href="#" onclick="changeNavbarColor('orangeBg')">Makes the navbar orange </a></li>
					<li id="blueBg"><a href="#" onclick="changeNavbarColor('blueBg')">Makes the navbar blue </a></li>
				</ul>
		</li>
        <li class="dropdown">
			<a href="#" data-toggle="dropdown" class="dropdown-toggle">Page 2 <b class="caret"></b></a>
				<ul class="dropdown-menu">
					<li><a href="#">Page 2.0.0 </a></li>
					<li><a href="#">Page 2.0.1 </a></li>
					<li><a href="#">Page 2.0.2...

CSS

body {
	background-color: #080808;
}

.container-fluid{
	background-color: #006600;
	border: 0;
}

#websiteName a{
	color: black;
	font-size: 20px;
}

#websiteName a:hover{
	color: red;
}

#theLinks ul li a{
	color: black;
	font-size: 20px;
}

#theLinks ul li a:hover{
	color: red;
}

JavaScript

function changeNavbarColor(ids){

	var navbarCol = document.getElementById("container-fluid1");
	var greenBg = document.getElementById("greenBg");
	var orangeBg = document.getElementById("orangeBg");
	var blueBg = document.getElementById("blueBg");
	var dropdown = document.getElementById("dropdown-menu1");
	
	
	var blue = "#06F";
	var green = "#060";
	var orange = "#F60";
	
	if(ids == "greenBg"){
		navbarCol.style.backgroundColor = green;
	}else if(ids  == "blueBg"){
		navbarCol.style.backgroundColor = blue;
	}else if(ids  == "orangeBg"){
		navbarCol.style.backgroundColor = orange;
	}
	

}