JSFiddle - React, Tailwind, and code Playground

HTML

<div class="input-collection">
  <input id="input1" type="button" value="Перекрасить в зёлёный цвет">
  <input id="input2" type="button" value="Перекрасить в синий цвет">
  <input id="input3" type="button" value="Перекрасить в красный цвет">
  <input id="input4" type="button" value="Сточить углы">
  <input id="input5" type="button" value="Сделать очень круглым">
  <input id="input6" type="button" value="Сбросить все свойства">
  
</div>

<div id="square"></div>

CSS

#square{
  width: 200px;
  height: 200px;
  background: white;
  margin-top: 50px;
}

input{
  margin-top: 10px;
}

JavaScript

input1.onclick = function(){
	square.style.background="green";
}

input2.onclick = function(){
	square.style.background="blue";
}

input3.onclick = function(){
	square.style.background="red";
}

input4.onclick = function(){
	square.style.borderRadius="30px";
}

input5.onclick = function(){
	square.style.borderRadius="50%";
}

input6.onclick = function(){
	square.style.borderRadius="";
  square.style.background="";
}