JSFiddle - React, Tailwind, and code Playground

by podgorniy

HTML

<ul class="super_menu" id="super_menu">
		<li><a href="#1">Menu item 1</a></li>
		<li><a href="#2">Menu item 2</a></li>
		<li><a href="#3">Menu item 3</a></li>
		<li><a href="#4">Some other</a></li>
	</ul>

	<select name="some_select" id="some_select">
		<option value="brown">Изменить фон меню на коричневый</option> <!-- #59321A -->
		<option value="red">Изменить фон меню на красный</option> <!-- #D92B2B -->
		<option value="green">Изменить фон меню на зелёный</option> <!-- #0AB200 -->
		<option value="">Вернуть на начальное значение</option> <!-- #556A73 -->
	</select>

	<input type="button" value="Выполнить!" id="bg_changer" />

CSS

ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
		}

		li {
			float: left;
			display: block;
		}

		li a {
			display: block;
			padding: 10px 25px;
			color: #F2C9BB;
			background: #556A73;
		}

		.brown .super_menu a {
			background: #59321A;
		}

		.red .super_menu a {
			background: #D92B2B;
		}

		.green .super_menu a {
			background: #0AB200;
		}

		#super_menu a:hover {
			color: #A6212C;
			background: #F2C9BB;
		}

		select, input {
			padding: 7px;
		}

		.super_menu:before,
		.super_menu:after {
			content: "";
			display: table;
		}

		.super_menu:after {
			clear: both;
		}

		.super_menu {
			zoom: 1;
			margin-bottom: 20px;
		}

		#some_select {
			width: 415px;
		}

JavaScript

var bg_changer = document.getElementById('bg_changer'),
			select = document.getElementById('some_select'),
			html = document.getElementsByTagName('html')[0];

		bg_changer.onclick = function () {
			html.className = select.value;
		}