JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

  .showbox {
    visibility:none;
    float: left;
    margin: 4em 1em;
    width: 100px;
    height: 60px;
    border: 2px solid green;
    background-color: #fff;
    line-height: 60px;
    text-align: center;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
  }
  .showbox.animate {
    visibility:visible;
    -webkit-transform: translate(3em,0);
    -moz-transform: translate(3em,0);
    -o-transform: translate(3em,0);
    -ms-transform: translate(3em,0);
    transform: translate(3em,0);
  }

</style>
<script>
	function tarik() {
    	var element = document.getElementById("tarik");
      element.classList.add("animate");
    }
</script>
</head>
<body>



<div onClick=tarik() id="tarik" class="showbox">box 1</div>

</body>
</html>