Card using TailwindCSS - Code Snippet

Preview it here

/* From Uiverse.io by Manish-Tamang */ 
<article
  class="hover:animate-background rounded-xl bg-gradient-to-r from-green-300 via-blue-500 to-purple-600 p-0.5 shadow-xl transition hover:bg-[length:400%_400%] hover:shadow-sm hover:[animation-duration:_4s]"
>
  <div class="w-60 rounded-[10px] bg-white p-4 !pt-20 sm:p-6">
    <time class="block text-xs text-gray-500" datetime="2019-06-29">
      29th June 2019
    </time>
    <a href="#">
      <h3 class="mt-0.5 text-lg font-medium text-gray-900">
        Next.js crash course by KhateykoBan
      </h3>
    </a>
    <div class="mt-4 flex flex-wrap gap-1">
      <span
        class="whitespace-nowrap rounded-full bg-purple-100 px-2.5 py-0.5 text-xs text-purple-600"
      >
        Snippet
      </span>
      <span
        class="whitespace-nowrap rounded-full bg-purple-100 px-2.5 py-0.5 text-xs text-purple-600"
      >
        JavaScript
      </span>
    </div>
  </div>
</article>