All Prompts
All Prompts
sectionstepsworkflowlandingtailwindresponsivedarkgrid
How It Works 4-Step Process Section
Секция "Как это работает" из 4 шагов. Адаптивный UI-компонент Tailwind для демонстрации процессов на лендингах SaaS-продуктов.
Prompt
<div class="max-w-5xl md:px-6 mr-auto ml-auto pt-8 pr-8 pb-8 pl-8">
<div class="mb-8">
<p
class="mb-3 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-medium text-slate-300 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="workflow"
class="lucide lucide-workflow h-4 w-4 text-violet-400">
<rect width="8" height="8" x="3" y="3" rx="2" class=""></rect>
<path d="M7 11v4a2 2 0 0 0 2 2h4" class=""></path>
<rect width="8" height="8" x="13" y="13" rx="2" class=""></rect>
</svg>
Simple 4-step process
</p>
<h2 class="text-3xl sm:text-4xl text-white mb-2 font-geist font-light tracking-tight">How it works</h2>
<p class="text-base text-slate-300 max-w-2xl font-geist">Create accessible palettes in minutes—generate, test
contrast, simulate vision, and export tokens.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Step 1 -->
<div class="p-6 rounded-xl border border-white/10 bg-white/[0.03]">
<span class="inline-flex items-center rounded-md border border-white/10 bg-white/5 px-2 py-0.5 text-[11px] text-slate-300 mb-4 font-geist">Step 1</span>
<h3 class="text-2xl text-white mb-2 font-geist font-light tracking-tight">Choose Base Colors</h3>
<p class="text-sm text-slate-400 font-geist">Start from brand hues or import existing tokens.</p>
<div class="mt-5 grid grid-cols-6 gap-2">
<div class="h-10 rounded bg-violet-500"></div>
<div class="h-10 rounded bg-fuchsia-500"></div>
<div class="h-10 rounded bg-emerald-500"></div>
<div class="h-10 rounded bg-orange-500"></div>
<div class="h-10 rounded bg-cyan-500"></div>
<div class="h-10 rounded bg-rose-500"></div>
</div>
</div>
<!-- Step 2 -->
<div class="p-6 rounded-xl border border-white/10 bg-white/[0.03]">
<span class="inline-flex items-center rounded-md border border-white/10 bg-white/5 px-2 py-0.5 text-[11px] text-slate-300 mb-4 font-geist">Step 2</span>
<h3 class="text-2xl text-white mb-2 font-geist font-light tracking-tight">Generate Scales</h3>
<p class="text-sm text-slate-400 font-geist">Create tints/shades with consistent deltas and luminance spacing.</p>
<div class="mt-5 space-y-2">
<div class="grid grid-cols-6 gap-1">
<div class="h-6 rounded bg-violet-900/90"></div>
<div class="h-6 rounded bg-violet-700/90"></div>
<div class="h-6 rounded bg-violet-600"></div>
<div class="h-6 rounded bg-violet-500"></div>
<div class="h-6 rounded bg-violet-400"></div>
<div class="h-6 rounded bg-violet-200"></div>
</div>
<div class="grid grid-cols-6 gap-1">
<div class="h-6 rounded bg-emerald-900/90"></div>
<div class="h-6 rounded bg-emerald-700/90"></div>
<div class="h-6 rounded bg-emerald-600"></div>
<div class="h-6 rounded bg-emerald-500"></div>
<div class="h-6 rounded bg-emerald-400"></div>
<div class="h-6 rounded bg-emerald-200"></div>
</div>
</div>
</div>
<!-- Step 3 -->
<div class="p-6 rounded-xl border border-white/10 bg-white/[0.03]">
<span class="inline-flex items-center rounded-md border border-white/10 bg-white/5 px-2 py-0.5 text-[11px] text-slate-300 mb-4 font-geist">Step 3</span>
<h3 class="text-2xl text-white mb-2 font-geist font-light tracking-tight">Check Contrast</h3>
<p class="text-sm text-slate-400 font-geist">Instant AA/AAA results for normal and large text.</p>
<div class="mt-5 rounded-lg border border-white/10 bg-black/30 p-4">
<div class="flex items-center justify-between">
<span class="text-xs text-slate-300 font-geist">Contrast</span>
<span class="text-xs text-violet-300 font-geist">7.8:1</span>
</div>
<div class="mt-3 grid grid-cols-3 gap-2">
<div class="rounded-md border border-white/10 bg-white/5 p-2 text-center">
<div class="text-[10px] text-slate-400 font-geist">AA</div>
<div class="mt-1 text-xs font-geist text-emerald-400 inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="check" class="lucide lucide-check h-3.5 w-3.5">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg> Pass
</div>
</div>
<div class="rounded-md border border-white/10 bg-white/5 p-2 text-center">
<div class="text-[10px] text-slate-400 font-geist">AAA</div>
<div class="mt-1 text-xs font-geist text-emerald-400 inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="check" class="lucide lucide-check h-3.5 w-3.5">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg> Pass
</div>
</div>
<div class="rounded-md border border-white/10 bg-white/5 p-2 text-center">
<div class="text-[10px] text-slate-400 font-geist">AA Large</div>
<div class="mt-1 text-xs font-geist text-emerald-400 inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="check" class="lucide lucide-check h-3.5 w-3.5">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg> Pass
</div>
</div>
</div>
</div>
</div>
<!-- Step 4 -->
<div class="p-6 rounded-xl border border-white/10 bg-white/[0.03]">
<span class="inline-flex items-center rounded-md border border-white/10 bg-white/5 px-2 py-0.5 text-[11px] text-slate-300 mb-4 font-geist">Step 4</span>
<h3 class="text-2xl text-white mb-2 font-geist font-light tracking-tight">Export & Sync</h3>
<p class="text-sm text-slate-400 font-geist">Ship tokens to your design and codebase in one click.</p>
<div class="mt-5 space-y-2">
<div class="flex items-center justify-between rounded-md border border-white/10 bg-white/5 px-3 py-2">
<div class="inline-flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="code"
class="lucide lucide-code h-4 w-4 text-slate-300">
<path d="m16 18 6-6-6-6" class=""></path>
<path d="m8 6-6 6 6 6" class=""></path>
</svg>
<div>
<div class="text-xs text-slate-200 font-geist">CSS Variables</div>
<div class="text-[10px] text-slate-500 font-geist">Design token syntax</div>
</div>
</div>
<button class="px-3 py-1 bg-violet-600 text-white text-xs rounded hover:bg-violet-500 font-geist">Export</button>
</div>
<div class="flex items-center justify-between rounded-md border border-white/10 bg-white/5 px-3 py-2">
<div class="inline-flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="box"
class="lucide lucide-box h-4 w-4 text-slate-300">
<path
d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"
class=""></path>
<path d="m3.3 7 8.7 5 8.7-5" class=""></path>
<path d="M12 22V12" class=""></path>
</svg>
<div>
<div class="text-xs text-slate-200 font-geist">Figma Styles</div>
<div class="text-[10px] text-slate-500 font-geist">Sync styles to Figma</div>
</div>
</div>
<button class="px-3 py-1 bg-white/5 text-white text-xs rounded border border-white/10 hover:bg-white/10 font-geist">Sync</button>
</div>
</div>
</div>
</div>
</div>