JSFiddle - React, Tailwind, and code Playground

HTML

<div id="firework"></div>

CSS

#firework {
  background-color: red;
  border-radius: 30%;
  height: 0px;
  margin: 0px 0px;
  width: 2px;
  -webkit-animation: firework-0 1s 1;
}


@-webkit-keyframes firework-0 {
  0% {
    height: 0px;
    margin-top: 0px;
  }
  50% {
    height: 64px;
    margin-top: 0px;
  }
  100% {
    height: 0px;
    margin-top: 64px;
  }
}