JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="blocks">

    <div class="block">
      Блок #1
    </div>

    <div class="block">
      Блок #2
    </div>

    <div class="block">
      Блок #3
    </div>

    <div class="block">
      Блок #4
    </div>

  </div>
  
  <div class="settings"> 
   <div class="">
     <label for="">Цвет</label>
     <input class="color-val" type="text">
     <button id="changeColor">Сменить</button>
   </div>
   
   <div class="">
     <label for="">Ширина</label>
     <input class="width-val" type="text">
     <button id="changeWidth">Сменить</button>
   </div>
    
   <div class="">
     <label for="">Высота</label>
     <input class="height-val" type="text">
     <button id="changeHeight">Сменить</button>
   </div>     
  </div>
</div>

SCSS

.container{
  width: 100%;
  
  padding: 10px;
}

.blocks {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: row wrap;
  
  min-height: 300px;
  
  margin: 10px;
  padding: 10px;
  
  background-color: #fafafa;
}

.block{
  display: flex;
  align-items: center;
  justify-content: center;
  
  width: 100px;
  height: 100px;
  
  margin: 10px;
  
  text-align: center;
  
  background-color:#ccc
}

.settings {
  
  div {
    margin-top: 10px;
  }
  
  label {
    min-width: 60px;
    display: inline-block;  
  }
  
  input {
  
  }
  
  button {
    
  }
}

JavaScript

$(function() {
 //замена цвета блоков
 $("#changeColor").click(function(){
   var parmColor = $(".color-val").val();
  
    $(".block").css( { backgroundColor: parmColor });
  });
  
   //замена ширины блоков
 $("#changeWidth").click(function(){
   var parmWidth = $(".width-val").val();
   if (parmWidth > 40) {
   	$(".block").css( { width: parmWidth });
   }
  
  });

   //замена высоты блоков
 $("#changeHeight").click(function(){
   var parmHeight = $(".height-val").val();
  
    $(".block").css( { height: parmHeight });
  });
});