JSFiddle - React, Tailwind, and code Playground

by nhoughto5

HTML

<div id="demo" style="display:block; margin-left:auto; margin-right:auto">
  <input type="checkbox" name="vehicle" value="Bike"><br>
</div>
</br>
<input type="button" value="Click Me to Fade!" onclick="test()" />

CSS

div {
  height: 50px;
  width: 100px;
  color: black;
  background-color: red;
  transition: background-color 1s linear;
  -moz-transition: background-color 1s linear;
  -webkit-transition: background-color 1s linear;
  -ms-transition: background-color 1s linear;
}

.startFade {
  background-color: transparent;
}

JavaScript

test = function() {
  document.getElementById("demo").className += "startFade";
}