JSFiddle - React, Tailwind, and code Playground

HTML

<div id="item" class="added-items fx">Book Appointment</div>
<br>
<br>
<p>Add item</p>

CSS

.added-items {
background: #f36;
border-radius: 30px;
height: 20px;
width: 200px;
color: #fff;
font-size: 11px;
text-align: center;
position: absolute;
left: 30px;
top: 0px;
z-index: 101;
line-height: 1.9em;
}

.fx{ -webkit-animation: anim 0.5s;
    animation: anim 0.5s;}

@-webkit-keyframes anim {
    from {-webkit-transform: rotateY(0deg);}
    to {-webkit-transform: rotateY(-360deg);}
}

@keyframes anim {
    from {transform: rotateY(0deg);}
    to {transform: rotateY(-360deg);}
}

.fx-1{ -webkit-animation: anima 0.5s;
    animation: anima 0.5s;}

@-webkit-keyframes anima {
    from {-webkit-transform: rotateY(-360deg);}
    to {-webkit-transform: rotateY(0deg);}
}

@keyframes anima {
    from {transform: rotateY(-360deg);}
    to {transform: rotateY(0deg);}
}

JavaScript

var count=0;
$('p').on('click', function() {
    count++;
    $('.fx').addClass('fx-1');
    $('#item').html(count);
});