JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/css/ionic.min.css">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/js/ionic.bundle.min.js"></script>
<div class="list card animated infinite zoomInLeft">  
  <div class="item item-divider">Recent Updates</div>
  <div class="item item-body">
    <div>
      There is a fire in <b>sector 3</b>
    </div>
  </div>
</div>

<div class="list card animated infinite zoomInRight">  
  <div class="item item-divider">Health</div>
  <div class="item item-body">
    <div>
      You ate an apple today!
    </div>
  </div>
</div>

<!-- <div class="list card animated infinite tada">  
  <div class="item item-divider">Upcoming</div>
  <div class="item item-body">
    <div>
      You have <b>29</b> meetings on your calendar tomorrow.
    </div>
  </div>
</div> -->

CSS

.chat-item.ng-enter {
    -webkit-animation: fadeInLeft 1s;
    animation: fadeInLeft 1s;
}

.chat-item.ng-enter-stagger {
  -webkit-animation-delay:200ms;
  animation-delay:200ms;

  -webkit-animation-duration:0;
  animation-duration:0;
}