JSFiddle - React, Tailwind, and code Playground

by Tanvir Ahmed

HTML

<button type="button">Click Me!</button>
<div></div>

CSS

div{
    background-color: #ccc;
    height: 100px;
    width: 100px;
    transition-property: top, left;
    transition-duration: 1s;
    transition-timing-function: linear;
    position: relative;
    top: 0;
    left: 0;
}
.clicked{
    animation-name: clicked;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes clicked{
    0% {top: 0; left: 0;}
    100% {top: 100px; left: 100px;}
}

JavaScript

$('button').click(function(){
	$('div').toggleClass('clicked');
});