JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>

</head>
<body>
  <div id="squareId" class="square">

  </div>
  <br/>
  <button onclick="changeCss()">increase</button>
  <button onclick="reset()">decrease</button>

</body>
</html>

CSS

.square{
      background-color:red;
      width:100px;
      height:100px;
      transition: width 1s linear;
    }

JavaScript

window.changeCss = function() {
        document.getElementById('squareId').style.width = "300px";
    }
    window.reset = function() {
        document.getElementById('squareId').style.width = "100px";
    }