JSFiddle - React, Tailwind, and code Playground

HTML

<div id="shape"></div>
<div id="shape2"></div>

CSS

#shape, #shape2 {
  background-color: #00BFFF;
  width: 100px;
  height: 100px;
  top: 0;
  left: 50px;
  position: relative;
  border-radius: 0;
  display: inline-block;
  text-align: center;
  line-height: 100px;
  vertical-align: middle;
  font-size:18px
}

#shape2 {
  left: 150px;
}

JavaScript

$("#shape").animate({
  top: 100
}, 1000).animate({
  borderRadius: 30
}, 1000);

$("#shape2").animate({
  top: 100
}, 1000);

$("#shape2").animate({
  borderRadius: 30
}, 1000);

$("#shape").html("hello");
$("#shape2").html("world");