All Prompts
All Prompts

cardfeaturetailwindgradientinteractiveresponsiveui
Gradient Feature Card with Action Button
UI-карточка с градиентом для отображения фичи: номер, заголовок, подзаголовок и кнопка. Tailwind CSS, эффекты при наведении. Для списков фич, цен, дашбордов.
Prompt
<div
class="relative overflow-hidden ring-1 ring-emerald-300 text-white bg-gradient-to-tr from-emerald-700 to-emerald-500 rounded-2xl pt-5 pr-5 pb-5 pl-5 w-44">
<div class="absolute inset-0"
style="background: radial-gradient(160px 160px at 30% 30%, rgba(255,255,255,0.25), transparent 60%), radial-gradient(220px 220px at 70% 70%, rgba(0,0,0,0.25), transparent 60%);">
</div>
<div class="relative flex items-center justify-between">
<span class="text-[11px] text-white/80">{ 06 }</span>
</div>
<div class="relative mt-6">
<p class="font-medium text-white tracking-tight">Premium Build</p>
<p class="text-white/90 text-sm">Aluminum body</p>
</div>
<button class="relative mt-8 h-9 w-9 rounded-full bg-white text-neutral-900 flex items-center justify-center shadow-sm transition-colors hover:text-emerald-700">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right h-4 w-4"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg>
</button>
</div>