JSFiddle - React, Tailwind, and code Playground

by Alen Doe

HTML

<div id="name_ui" name="top" class="div_hover" style="background:#ebc7df;">
  <input id="name_ui_input_on" class="flexbox" type="button" value="on">
  <input id="name_ui_input_off" class="flexbox" type="button" value="off">
</div>

CSS

.div_hover {
  width:100px;
  height:100px;
  display: flex;
}

.div_hover:hover {
  width:200px;
  height:200px;
}

.flexbox {
  margin: auto;
}

JavaScript

document.body.div = document.getElementById('name_ui');
console.log( document.body.div );

name_ui_input_on.onclick = function () {
	document.getElementById('name_ui').style.background = '#c2579e';
}

name_ui_input_off.onclick = function () {
	document.getElementById('name_ui').style.background = '#ebc7df';
}