VibeCoderzVibeCoderz
Telegram
All Prompts
3-Step Workflow Highlight Card preview
cardstatistictailwindgradientresponsivelanding pageonboardingdecorative

3-Step Workflow Highlight Card

Адаптивная карточка Tailwind с 3 шагами: число, заголовок, текст. Для лендингов, онбординга, дашбордов. Подчеркивает простые многоэтапные процессы.

Prompt

<div
  class="relative overflow-hidden sm:p-8 bg-gradient-to-br from-indigo-600 to-indigo-800 border-white/10 border rounded-2xl pt-6 pr-6 pb-6 pl-6 w-full max-w-3xl h-fit">
  <div class="grid grid-cols-1 sm:grid-cols-[auto_1fr] items-center gap-4 sm:gap-8">
    <p
      class="text-[64px] sm:text-[96px] lg:text-[120px] leading-none text-white/95 font-geist font-medium tracking-tighter">
      3</p>
    <div class="">
      <h3 class="sm:text-3xl text-2xl font-medium text-white tracking-tighter font-geist">steps workflow</h3>
      <p class="mt-2 text-sm sm:text-base text-white/80 font-geist">From idea to launch—fast, collaborative, reliable.
      </p>
    </div>
  </div>
  <!-- Dotted staircase -->
  <div class="pointer-events-none absolute right-6 top-6 hidden sm:block">
    <div class="flex flex-col gap-2">
      <div class="flex justify-end gap-2">
        <span class="h-1.5 w-1.5 rounded-full bg-indigo-200/80"></span>
      </div>
      <div class="flex justify-end gap-2">
        <span class="h-1.5 w-1.5 rounded-full bg-indigo-200/70"></span>
        <span class="h-1.5 w-1.5 rounded-full bg-indigo-200/80"></span>
      </div>
      <div class="flex justify-end gap-2">
        <span class="h-1.5 w-1.5 rounded-full bg-indigo-200/60"></span>
        <span class="h-1.5 w-1.5 rounded-full bg-indigo-200/70"></span>
        <span class="h-1.5 w-1.5 rounded-full bg-indigo-200/80"></span>
      </div>
      <div class="flex justify-end gap-2">
        <span class="h-1.5 w-1.5 rounded-full bg-indigo-200/50"></span>
        <span class="h-1.5 w-1.5 rounded-full bg-indigo-200/60"></span>
        <span class="h-1.5 w-1.5 rounded-full bg-indigo-200/70"></span>
        <span class="h-1.5 w-1.5 rounded-full bg-indigo-200/80"></span>
      </div>
      <div class="flex justify-end gap-2">
        <span class="h-1.5 w-1.5 rounded-full bg-indigo-200/40"></span>
        <span class="h-1.5 w-1.5 rounded-full bg-indigo-200/50"></span>
        <span class="h-1.5 w-1.5 rounded-full bg-indigo-200/60"></span>
        <span class="h-1.5 w-1.5 rounded-full bg-indigo-200/70"></span>
        <span class="h-1.5 w-1.5 rounded-full bg-indigo-200/80"></span>
      </div>
    </div>
  </div>
</div>
All Prompts