JSFiddle - React, Tailwind, and code Playground

by DyingSoul81

HTML

<div id="box" class="box">
</div>
<div id="btn" onclick="bla()">
click here
</div>

CSS

#btn
{
  position:fixed;
  top:60px;
  left:0px;
  width:50px;
  height:50px;
  background-color:#FEDCBA;
}

.box
{
  display:none;
  position:fixed;
  top:0px;
  left:0px;
  width:50px;
  height:50px;
  background-color:#ABCDEF;
}

.box.trans
{
    -webkit-transition: left 2s;
	-moz-transition: left 2s;
	transition: left 2s;
}

JavaScript

function bla()
{
  /*
	var obj = $('#box');
  obj.css("left", "200px");
  obj.css("display", "initial");
	obj.addClass("trans");
  obj.css("left", "500px");
  */
  var elem = document.getElementById('box');
  elem.style.left = "200px";
  elem.style.display = "initial";
  elem.className = "box trans";
  elem.style.left = "500px";
}