Tailwind - Animate

index.html

<ul class="container mx-auto divide-y divide-gray-400 divide-dotted" style="font-family: Raleway">
  <li class="flex items-center justify-between px-4 py-2">
    <div class="w-full">
      <img class="animate-none h-16 w-full" src="http://pixelprowess.com/i/powship.svg" alt="POW Ship">
    </div> 
    <div class="ml-5 text-right">
      <div class="text-xs font-semibold inline-block font-mono whitespace-nowrap px-2 py-1 rounded text-white bg-pink-500 rounded-2">animate-none</div>
    </div>
  </li>
  <li class="flex items-center justify-between px-4 py-2">
    <div class="w-full">
      <img class="animate-spin h-16 w-full" src="http://pixelprowess.com/i/powship.svg" alt="POW Ship">
    </div> 
    <div class="ml-5 text-right">
      <div class="text-xs font-semibold inline-block font-mono whitespace-nowrap px-2 py-1 rounded text-white bg-pink-500 rounded-2">animate-spin</div>
    </div>
  </li>
  <li class="flex items-center justify-between px-4 py-2">
    <div class="w-full">
      <img class="animate-pulse h-16 w-full" src="http://pixelprowess.com/i/powship.svg" alt="POW Ship">
    </div> 
    <div class="ml-5 text-right">
      <div class="text-xs font-semibold inline-block font-mono whitespace-nowrap px-2 py-1 rounded text-white bg-pink-500 rounded-2">animate-pulse</div>
    </div>
  </li>
  <li class="flex items-center justify-between px-4 py-2">
    <div class="w-full">
      <img class="animate-bounce h-16 w-full" src="http://pixelprowess.com/i/powship.svg" alt="POW Ship">
    </div> 
    <div class="ml-5 text-right">
      <div class="text-xs font-semibold inline-block font-mono whitespace-nowrap px-2 py-1 rounded text-white bg-pink-500 rounded-2">animate-bounce</div>
    </div>
  </li>
</ul>

styles

<link href="https://unpkg.com/tailwindcss@2/dist/tailwind.min.css" rel="stylesheet" />

tailwind-animate.markdown

Tailwind - Animate

A Pen by Ray Villalobos on CodePen.

License.