类型：组件 · 分类：卡片 · 收录：2026-09-19 · 源码：会员可见
[hidecontent type="vip1"]<!-- From Uiverse.io by Uncannypotato69 - Tags: simple, purple, gradient, card, dark, tailwindcss -->
<div
class="h-[12em] w-[18em] border-2 border-[rgba(75,30,133,0.5)] rounded-[1.5em] bg-gradient-to-br from-[rgba(75,30,133,1)] to-[rgba(75,30,133,0.01)] text-white font-nunito p-[1em] flex justify-center items-left flex-col gap-[0.75em] backdrop-blur-[12px]"
>
<div>
<h1 class="text-[2em] font-medium">Heading</h1>
<p class="text-[0.85em]">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolorum
blanditiis pariatur sequi magni.
</p>
</div>
<button
class="h-fit w-fit px-[1em] py-[0.25em] border-[1px] rounded-full flex justify-center items-center gap-[0.5em] overflow-hidden group hover:translate-y-[0.125em] duration-200 backdrop-blur-[12px]"
>
<p>Button</p>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="white"
viewBox="0 0 24 24"
stroke-width="1"
stroke="currentColor"
class="w-6 h-6 group-hover:translate-x-[10%] duration-300"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"
></path>
</svg>
</button>
</div>