JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<button class="send">Click</button>
<div class="error">

</div>

CSS

.error {
  width:300px;
  height:300px;
  background:red;
  color:#fff;
  display:none;
}
.error.active {
  display:block;
}

JavaScript

var errorDiv = $('.error');

var showError = function() {
    errorDiv.addClass('active animated zoomIn');
		errorDiv.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
		function() {
			errorDiv.removeClass('animated zoomIn');
		});
};

var hideError = function() {
		if(errorDiv.is(':visible')) {
      errorDiv.addClass('animated zoomOut');
      errorDiv.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
      function() {
        errorDiv.removeClass('active animated zoomOut');
      });
    };
};


$('.send').on('click', function() {
	hideError();
	getGrabberInfo();
});

	var getGrabberInfo = function() {
		$.ajax({
			url: "/echo/json/",
			type: "POST",
			data: {1:1},
			beforeSend : function() {
				console.log('beforeSend');
			},
			success: function(data) {
				showError();
			}			
		});			
	};