卡片 · Short Bobcat

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

[hidecontent type="vip1"]

<!-- From Uiverse.io by Javierrocadev - Source: Javierrocadev - Tags: simple, blue, gradient, card, hover effect, card template -->
<div class="w-60 h-80 bg-gray-50 p-3 flex flex-col gap-1">
  <div class="duration-500 contrast-50 h-48 bg-gradient-to-bl from-black via-orange-900 to-indigo-600  hover:contrast-100"></div>
  <div class="flex flex-col gap-4">
    <div class="flex flex-row justify-between">
      <div class="flex flex-col">
        <span class="text-xl font-bold">Long Chair</span>
        <p class="text-xs text-gray-700">ID: 23432252</p>
      </div>
      <span class="font-bold  text-red-600">$25.99</span>
    </div>
    <button class="hover:bg-sky-700 text-gray-50 bg-sky-800 py-2">Add to cart</button>
  </div>
</div>

[/hidecontent]