Skip to content

Instantly share code, notes, and snippets.

@lostintangent
Last active Dec 31, 2020
Embed
What would you like to do?
Tailwind - Animate
<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>
<link href="https://unpkg.com/tailwindcss@2/dist/tailwind.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment