JSFiddle - React, Tailwind, and code Playground

by lukempeters

HTML

<div class="theBox">
    <div class="theDot"></div>
</div>

CSS

body {
    padding: 50px;
}

.theBox {
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid #cccccc;
    background: #fff;
}

.theDot {
    position: absolute;
    top: -5px;
    left: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff0000;
}

JavaScript

$('.theDot').animate({
    left: '195px'
}, 500).animate({
    top: '195px'
}, 500).animate({
    left: '-5px'
}, 500).animate({
    top: '-5px'
}, 500);