VibeCoderzVibeCoderz
Telegram
All Prompts
Gradient Feature Card with Action Button preview
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>
All Prompts