JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
  <script src="https://unpkg.com/css-animator/bundles/builder.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"/>
</head>
<body>
  <div>
    <div id="box"></div>
    <div id="actions">
      <button id="doHide">
        Hide
       </button>
       <button id="doShow">
        Show
       </button>
      <button id="doAnimate">
        Animate
       </button>
    </div>
  </div>
</body>
</html>

CSS

#box {
  width: 20px;
  height: 20px;
  background-color: black;
}

#actions {
  margin-top: 10px;
}

JavaScript

const AnimationBuilder = window['css-animator/builder'].AnimationBuilder;
const AnimationMode = window['css-animator/builder'].AnimationMode;

const animator = new AnimationBuilder();

// Do not attempt to pin the element while animating (do not change CSS position)
// This keeps the buttons in place for this use-case
animator.pin = false;

// Use visibility:hidden instead of hidden attribute (display:none)
// This keeps the buttons in place for this use-case
animator.useVisibility = true;

// Call animate() function on button click
document.getElementById('doAnimate').onclick = animate;
document.getElementById('doHide').onclick = hide;
document.getElementById('doShow').onclick = show;

function animate() {
	const element = document.getElementById('box');

	animator
  	.setType('bounce')
    .setDuration(1500)
    // AnimationMode.Animate is the default
    .animate(element, AnimationMode.Animate);
}

function hide() {
	const element = document.getElementById('box');

	animator
  	.setType('fadeOutDown')
    .setDuration(1500)
    // Uses AnimationMode.Hide
    .hide(element);
}

function show() {
	const element = document.getElementById('box');

	animator
  	.setType('fadeInUp')
    .setDuration(1500)
    // Uses AnimationMode.Hide
    .show(element);
}