卡片 · Smooth Quail

类型：组件　·　分类：卡片　·　收录：2026-09-19　·　源码：会员可见

[hidecontent type="vip1"]

<!-- From Uiverse.io by Manish-Tamang  - Tags: card, gradients, border, hover effect -->
<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>


    

[/hidecontent]