JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="navbar">
  <li><a href="index.html">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>

</ul>

<button id="navcol-btn">
	Change Navbar Color
</button>

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: blueviolet;
}

li {
    float: left;
}

li a {
    display: inline-block;
    color: white; /*changes text of the nav bar */
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

#navcol-btn
{
	margin: 20px 0; 
	cursor: pointer;
}

JavaScript

// make button do something on click 
var btn = document.getElementById( 'navcol-btn' ); 
btn.addEventListener( 'click', function()
{
	// target navbar ul by ID 
	var nav  = document.getElementById( 'navbar' ), 
	    rand = Math.random() * 360; 
	
	// change bg-color 
	nav.style['background-color'] = 'hsl('+rand+', 50%, 50%)'; 
});