JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-animate.min.js"></script>
<div ng-app="myApp" class="box scale" drag-me>
</div>

CSS

.box.ng-hide {
-webkit-transition: all .3s cubic-bezier(0.250, 0.460, 0.450, 0.940); 
   -moz-transition: all .3s cubic-bezier(0.250, 0.460, 0.450, 0.940); 
     -o-transition: all .3s cubic-bezier(0.250, 0.460, 0.450, 0.940); 
        transition: all .3s cubic-bezier(0.250, 0.460, 0.450, 0.940); /* easeOutQuad */
    
    top:10px;
    opacity: 0;
}


.box
{
 
  border-radius: 5px;

padding:10px 15px 10px 15px;
    
    min-width:30px;
width:80px;
height:80px;
position: fixed !important;
  top:60px;
  left:0;
  right:0;
  margin: 0 auto;
  z-index:5;
  box-sizing: border-box;
    border:1px solid rgb(240,240,240);
    background:deepskyblue;
}


/*Animations*/

.scale.ng-hide-add
{
  -webkit-animation:.2s shrink;  
  animation:0.2s shrink;
}


.scale.ng-hide-remove
{
  -webkit-animation:.2s grow;  
  animation:0.2s grow;
}

@keyframes grow {
  0% {
     opacity:0;
   transform: scale(0);
  }
  60% {
        
    transform: scale(.7);
  }
  100% { 
    opacity:1;
    transform: scale(1);
  }
}



@keyframes shrink {
  0% {
    
    transform: scale(1);
  }
  60% {
      opacity:1;
    transform: scale(.4);
  }
  100% { 
    opacity:0;
    transform: scale(0);
  }
}

JavaScript

var mod = angular.module('myApp',['ngAnimate']);

mod.directive('dragMe',function(){

		return {
      restict : 'A',
    	link : function(scope,elem,attr,ctr){

        	elem.draggable();
      
      }
    
    };

});