卡片 · Cuddly Rabbit

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

[hidecontent type="vip1"]

<!-- From Uiverse.io by Manish-Tamang  - Tags: card, cool card, tailwindcss -->
<div class="p-4 w-[300px] rounded-lg border dark:border-gray-800">
  <h1 class="text-2xl font-bold">History</h1>
  <div class="grid gap-4 mt-2">
    <div class="flex gap-2 items-center">
      <div class="bg-red-500 w-20 h-10 rounded"></div>
      <div class="grid gap-1 text-sm flex-1">
        <h2 class="font-semibold leading-none line-clamp-2">
          Introducing the frontend cloud
        </h2>
        <div class="text-xs text-gray-500 line-clamp-1 dark:text-gray-400">
          1.2M views
        </div>
      </div>
    </div>
    <div class="flex gap-2 items-center">
      <div class="bg-yellow-500 w-20 h-10 rounded"></div>
      <div class="grid gap-1 text-sm flex-1">
        <h2 class="font-semibold leading-none line-clamp-2">
          Using Vercel KV with Svelte
        </h2>
        <div class="text-xs text-gray-500 line-clamp-1 dark:text-gray-400">
          21K views
        </div>
      </div>
    </div>
    <div class="flex gap-2 items-center">
      <div class="bg-blue-500 w-20 h-10 rounded"></div>
      <div class="grid gap-1 text-sm flex-1">
        <h2 class="font-semibold leading-none line-clamp-2">
          Loading UI with Next.js 13
        </h2>
        <div class="text-xs text-gray-500 line-clamp-1 dark:text-gray-400">
          12K views
        </div>
      </div>
    </div>
  </div>
</div>


    

[/hidecontent]