JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://static.mcl.gg/bower_components/bootswatch-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://static.mcl.gg/bower_components/ngToast/dist/ngToast.min.css">
<script src="https://static.mcl.gg/bower_components/angular/angular.min.js"></script>
<script src="https://static.mcl.gg/bower_components/angular-animate/angular-animate.min.js"></script>
<script src="https://static.mcl.gg/bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="https://static.mcl.gg/bower_components/ngToast/dist/ngToast.min.js"></script>
<link rel="stylesheet" href="https://static.mcl.gg/bower_components/animate.css/animate.min.css">
<toast></toast>
<div ng-controller="TestController">
    <input type="button" class="btn btn-default" value="show toast" ng-click="showToast();">
    <input type="button" class="btn btn-default" value="clear toast" ng-click="clearToast();">
    <input type="button" class="btn btn-default" value="Unique toast" ng-click="showSingleToast();">
    
    
</div>

CSS

.toastanim.ng-enter {
    animation: bounceIn 1s;
}

JavaScript

angular
		.module('testApp',['ngAnimate','ngSanitize','ngToast'])
    
    .config(function (ngToastProvider) {
    
				ngToastProvider.configure({
						verticalPosition: 'top',
            horizontalPosition: 'center',
            additionalClasses: 'toastanim'
        });
    
    })
  
		.controller('TestController', function ($scope, ngToast) {
    
    		$scope.showToast = function() {
    				            ngToast.create({
                content:'test'
            });
  			};
        
    		$scope.showSingleToast = function() {
        								ngToast.dismiss();
    				            ngToast.create({
                content:'I am unique <3'
            });
  			};
        
        $scope.clearToast = function() {
    				            ngToast.dismiss();
  			};
        
        
        
		});