JSFiddle - React, Tailwind, and code Playground

by Jiang Xuan

HTML

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="actions">
  <button id="will-change">Delate css rule will-change</button><br>
  <button id="box-shadow">Delete css rule box-shadow</button><br>
  <div>
    <label for="">Set css rule width(including unit):</label>
    <input id="width-value" type="text">
    <button id="set-width">Set</button>
  </div>
  <div>
    <label for="">Set css rule box-radius(including unit):</label>
    <input id="box-radius-value" type="text">
    <button id="set-box-radius">Set</button>
    <button id="box-radius-add-one">+1</button>
    <button id="box-radius-reduce-one">-1</button>
  </div>
</div>

CSS

.container {
  overflow: hidden;
  width: 100px;
  margin: auto;
  box-shadow: 0px 3px 20px 0px #b3b2b2;
  background-color: red;
  border-radius: 19px;
}
.container .item {
  height: 50px;
  will-change: transform;
  background-color: green;
}
.actions {
  margin-top: 10px;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

JavaScript

var container = $('.container')
var items = $('.item')