JSFiddle - React, Tailwind, and code Playground

HTML

<p>ROTATE X</p>
<input class="inputrange" name="transformRx" type="range">
<p>ROTATE Y</p>
<input class="inputrange" name="transformRy" type="range">
<p>SKEW Y</p>
<input class="inputrange" name="transformSy" type="range">
<p>SKEW X</p>
<input class="inputrange" name="transformSx" type="range">

<!--2-->
<p>ROTATE X</p>
<input class="inputrange2" name="transformRx" type="range">
<p>ROTATE Y</p>
<input class="inputrange2" name="transformRy" type="range">
<p>SKEW Y</p>
<input class="inputrange2" name="transformSy" type="range">
<p>SKEW X</p>
<input class="inputrange2" name="transformSx" type="range">

<div id="inputrange" class="ht" name="draggable">
  <div id="inner-inputrange"></div>
</div>

<div id="inputrange2" class="ht" name="draggable">
  <div id="inner-inputrange2"></div>
</div>

CSS

#inputrange{
  width: 10rem;
  height: 5rem;
  background: blue;
}

#inner-inputrange{
  width: 5rem;
  height: 100%;
  background: purple;
}
#inputrange2{
  margin-top: 5rem;
  width: 10rem;
  height: 5rem;
  background: blue;
}

#inner-inputrange2{
  width: 5rem;
  height: 100%;
  background: purple;
}

JavaScript

$('input[type="range"]').on('input change', function(){
switch (this.name){
case "transformRx":
      calculateMatrix(this.className, this.value, null, null, null)
break;
case "transformRy":
  calculateMatrix(this.className, null, this.value, null, null)
  break;
case "transformSy":
  calculateMatrix(this.className, null, null, this.value, null)
  break;
case "transformSx":
  calculateMatrix(this.className, null, null, null, this.value)
  break;
}})

function calculateMatrix(elName, rotateX, rotateY, skewY, skewX) {
if (elName != "undefined") {
$('#'+elName).css('transform', 'rotateX('+rotateX+'deg) rotateY('+rotateY+'deg) skewX('+skewX+'deg) skewY('+skewY+'deg)')
}
}