All Prompts
All Prompts
carddashboardanalyticstailwinduiinteractive
Analytics Revenue Card with Code & Agent Studio UI
Стеклянная карточка аналитики дохода с графиком и панелью IDE. Для SaaS-дашбордов. UI, Tailwind.
Prompt
<<div class="flex items-center justify-center min-h-screen">
<div
class="card-top glass-effect overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] bg-gradient-to-r from-white/15 to-white/5 w-[32rem] h-fit rounded-[1.2em] relative"
style="backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px)">
<div class="absolute inset-0 rounded-[1.2em] border border-white/20"
style="mask-image: linear-gradient(135deg, white, transparent 60%)"></div>
<div
class="overflow-hidden flex flex-col z-20 bg-[#0A0D12] border-white/10 border rounded-[1.2em] absolute top-0 right-0 bottom-0 left-0 shadow-2xl">
<!-- Header -->
<div class="flex justify-between items-start p-6 pb-2">
<div class="">
<div class="text-sm font-medium text-slate-400 font-sans">Monthly Recurring Revenue</div>
<div class="text-3xl font-semibold text-white mt-1 tracking-tight font-sans">
$124,500<span class="text-slate-500 text-lg font-normal">.00</span></div>
</div>
<div class="flex items-center gap-1.5 bg-emerald-500/10 border border-emerald-500/20 px-2.5 py-1 rounded-full">
<div class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></div>
<span class="text-[11px] font-medium text-emerald-400 font-sans tracking-wide">LIVE</span>
</div>
</div>
<!-- Chart Area -->
<div class="flex-1 flex gap-2 pt-4 pr-6 pb-4 pl-6 relative gap-x-2 gap-y-2 items-end">
<!-- Bars -->
<div
class="flex-1 bg-neutral-800/40 rounded-sm h-[40%] hover:bg-neutral-700/60 transition-all duration-300 cursor-crosshair group relative border-t border-white/5">
</div>
<div
class="flex-1 bg-neutral-800/40 rounded-sm h-[65%] hover:bg-neutral-700/60 transition-all duration-300 cursor-crosshair group relative border-t border-white/5">
</div>
<div
class="flex-1 bg-neutral-800/40 rounded-sm h-[55%] hover:bg-neutral-700/60 transition-all duration-300 cursor-crosshair group relative border-t border-white/5">
</div>
<div
class="flex-1 bg-neutral-800/40 rounded-sm h-[80%] hover:bg-neutral-700/60 transition-all duration-300 cursor-crosshair group relative border-t border-white/5">
</div>
<div
class="flex-1 bg-indigo-500 rounded-sm h-[90%] shadow-[0_0_20px_rgba(99,102,241,0.3)] hover:bg-indigo-400 transition-all duration-300 cursor-crosshair group relative border-t border-white/20">
<div
class="absolute -top-8 left-1/2 -translate-x-1/2 bg-neutral-900 text-[10px] font-medium text-white px-2 py-1 rounded border border-white/10 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-10 shadow-xl pointer-events-none">
$9.2k</div>
</div>
<div
class="flex-1 bg-neutral-800/40 rounded-sm h-[70%] hover:bg-neutral-700/60 transition-all duration-300 cursor-crosshair group relative border-t border-white/5">
</div>
<div
class="flex-1 bg-neutral-800/40 rounded-sm h-[85%] hover:bg-neutral-700/60 transition-all duration-300 cursor-crosshair group relative border-t border-white/5">
</div>
</div>
<!-- Terminal/Code Section -->
<div
class="mx-6 mb-6 mt-2 rounded-lg bg-[#05070A] border border-white/5 overflow-hidden group hover:border-white/10 transition-colors">
<div class="flex items-center justify-between px-3 py-2 border-b border-white/5 bg-white/[0.02]">
<div class="flex items-center gap-2">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="text-slate-500">
<rect x="2" y="3" width="20" height="14" rx="2" ry="2" class=""></rect>
<line x1="8" y1="21" x2="16" y2="21" class=""></line>
<line x1="12" y1="17" x2="12" y2="21" class=""></line>
</svg>
<span class="text-[10px] font-medium text-slate-500 font-sans">Payment Intent</span>
</div>
<span class="text-[10px] text-emerald-500 font-mono flex items-center gap-1 opacity-80">
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class=""><polyline points="20 6 9 17 4 12" class=""></polyline></svg>
200 OK
</span>
</div>
<div class="p-3 font-mono text-[11px] leading-relaxed text-slate-400 select-text">
<div class=""><span class="text-indigo-400">const</span> payment = <span class="text-indigo-400">await</span>
ledger.<span class="text-blue-400">pay</span>.create({</div>
<div class="pl-4 text-slate-300">amount: <span class="text-emerald-400">2400</span>,
<span class="text-slate-600 italic">// $24.00</span>
</div>
<div class="pl-4 text-slate-300">currency: <span class="text-emerald-400">'usd'</span>,</div>
<div class="pl-4 text-slate-300">tax_auto: <span class="text-indigo-400">true</span></div>
<div class="">});</div>
</div>
</div>
</div>
<div
class="pointer-events-none absolute -inset-px rounded-[1.3rem] bg-[radial-gradient(80%_60%_at_50%_0%,rgba(90,97,255,0.12),transparent_60%)]">
</div>
<div class="flex flex-col h-full p-6 pb-7">
<div class="flex justify-between items-start mb-2">
<div class="w-3/4">
<h1 class="text-[26px] leading-tight tracking-tight font-sans font-medium" style="">Agent Studio</h1>
<p class="text-neutral-300 text-sm font-light mt-1 font-sans">Orchestrator • AI-Powered</p>
</div>
<div class="w-1/4 text-right">
<div class="text-[20px] font-semibold font-mono font-sans">AI-AGENTS</div>
<div class="flex items-center justify-end gap-1 mt-1">
<div class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"
style="box-shadow: 0 0 6px rgba(16, 185, 129, 0.3)"></div>
<span class="text-xs text-emerald-300 font-sans">ACTIVE</span>
</div>
</div>
</div>
<div class="relative mx-auto w-full mb-4">
<div
class="absolute inset-0 translate-y-2 scale-[0.98] rounded-lg bg-neutral-900/50 ring-1 ring-white/5 blur-[0.3px]">
</div>
<div
class="relative rounded-lg bg-[linear-gradient(180deg,rgba(19,24,31,0.9),rgba(10,13,18,0.9))] ring-1 ring-white/10 overflow-hidden">
<div class="flex items-center justify-between px-3 py-2 border-b border-white/5 bg-neutral-950/50">
<div class="flex items-center gap-2">
<span class="h-2 w-2 rounded-full bg-red-500/60"></span>
<span class="h-2 w-2 rounded-full bg-amber-500/60"></span>
<span class="h-2 w-2 rounded-full bg-emerald-500/60"></span>
</div>
<div
class="flex items-center gap-2 rounded-full border border-white/10 bg-neutral-900/60 px-2 py-1 text-xs text-neutral-300">
<svg class="w-3 h-3 text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" class=""></path>
</svg>
<span class="text-neutral-400/80 font-sans">agents…</span>
</div>
</div>
<div class="relative h-32">
<div class="absolute inset-0 grid grid-cols-[30px_1fr]">
<div
class="select-none border-r border-white/5 bg-neutral-950/30 px-2 py-2 text-[11px] leading-4 text-neutral-400/50">
<div class="font-sans">1</div>
<div class="font-sans">2</div>
<div class="font-sans">3</div>
<div class="font-sans">4</div>
<div class="font-sans">5</div>
<div class="font-sans">6</div>
<div class="font-sans">7</div>
<div class="font-sans">8</div>
</div>
<pre
class="m-0 overflow-hidden px-3 py-2 text-[11px] leading-4 text-neutral-300 font-sans"><span class="text-blue-300 font-sans">class</span> <span class="text-white font-sans">OrchestratorAgent</span>:
<span class="text-blue-300 font-sans">def</span> <span class="text-yellow-300 font-sans">__init__</span>(<span class="text-emerald-300 font-sans">self</span>, tools, memory):
<span class="text-emerald-300 font-sans">self</span>.tools = tools
<span class="text-emerald-300 font-sans">self</span>.memory = memory
<span class="text-blue-300 font-sans">def</span> <span class="text-yellow-300 font-sans">plan</span>(<span class="text-emerald-300 font-sans">self</span>, goal):
steps = []
<span class="text-blue-300 font-sans">for</span> tool <span class="text-blue-300 font-sans">in</span> <span class="text-emerald-300 font-sans">self</span>.tools:</pre>
</div>
<div
class="pointer-events-none absolute inset-x-0 bottom-0 h-8 bg-gradient-to-t from-[#0B0F14] to-transparent">
</div>
</div>
</div>
</div>
<div class="flex justify-between mb-4 max-w-lg">
<div
class="text-center px-2 cursor-pointer transition-all duration-300 p-2 rounded-lg hover:bg-white/5 hover:-translate-y-0.5">
<div
class="text-2xl leading-tight bg-gradient-to-r from-white/95 to-neutral-200/80 bg-clip-text text-transparent font-sans font-medium"
style="">
12
</div>
<div class="text-xs opacity-70 uppercase tracking-wide font-sans">ACTIVE AGENTS</div>
</div>
<div class="w-px h-12 my-auto bg-gradient-to-b from-transparent via-white/40 to-transparent"></div>
<div
class="text-center px-2 cursor-pointer transition-all duration-300 p-2 rounded-lg hover:bg-white/5 hover:-translate-y-0.5">
<div
class="text-2xl leading-tight bg-gradient-to-r from-white/95 to-neutral-200/80 bg-clip-text text-transparent font-sans font-medium"
style="">
98
<span class="text-sm font-sans">%</span>
</div>
<div class="text-xs opacity-70 uppercase tracking-wide font-sans">SUCCESS RATE</div>
</div>
<div class="w-px h-12 my-auto bg-gradient-to-b from-transparent via-white/40 to-transparent"></div>
<div
class="text-center px-2 cursor-pointer transition-all duration-300 p-2 rounded-lg hover:bg-white/5 hover:-translate-y-0.5">
<div
class="text-2xl leading-tight bg-gradient-to-r from-white/95 to-neutral-200/80 bg-clip-text text-transparent font-sans font-medium"
style="">847</div>
<div class="text-xs opacity-70 uppercase tracking-wide font-sans">TASKS RUN</div>
</div>
</div>
<div class="h-px w-full bg-gradient-to-r from-transparent via-white/25 to-transparent mb-3"></div>
<div class="flex flex-wrap gap-2 mb-4">
<span class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full bg-violet-500/10 border border-violet-500/20 text-violet-300 cursor-pointer transition-all duration-300 hover:-translate-y-px hover:shadow-lg font-sans">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" class=""></path>
</svg>
ORCHESTRATOR
</span>
<span class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-300 cursor-pointer transition-all duration-300 hover:-translate-y-px hover:shadow-lg font-sans">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" class=""></path>
</svg>
ANALYTICS
</span>
<span class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-300 cursor-pointer transition-all duration-300 hover:-translate-y-px hover:shadow-lg font-sans">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" class=""></path>
</svg>
WORKFLOW
</span>
</div>
<div class="rounded px-2 py-0.5 font-mono text-xs relative overflow-hidden mb-4"
style="background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.08) 100%)">
<div class="flex items-center justify-between">
<span class="text-neutral-300 font-sans">DEPLOYMENT: PRODUCTION</span>
<span class="text-white font-sans">v3.2.1-stable</span>
</div>
</div>
<div class="mt-auto flex justify-between w-full">
<div class="flex flex-col">
<span class="opacity-70 flex items-center gap-2 text-sm mb-1">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12l4 4m-4-4l4-4" class=""></path>
</svg>
<span class="font-sans">AUTO-SCALING</span>
</span>
<span class="text-xs opacity-60 flex items-center gap-2 font-mono">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" class=""></path>
</svg>
<span class="font-sans">MULTI-TENANT</span>
</span>
</div>
<div class="flex flex-col items-end">
<span class="opacity-70 flex items-center gap-2 text-sm mb-1">
<svg class="w-[12px] h-[12px]" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" data-icon-replaced="true" style="width: 12px; height: 12px; color: rgb(245, 245, 245);">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" class=""></path>
</svg>
<span class="font-sans">AUTONOMOUS</span>
<div class="w-2 h-2 rounded-full bg-violet-400" style="box-shadow: 0 0 6px rgba(139, 92, 246, 0.4)"></div>
</span>
<p class="text-sm font-medium flex items-center gap-2 cursor-pointer hover:text-blue-300 transition-colors">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" class=""></path>
</svg>
<span class="font-sans">agent-studio.ai</span>
</p>
</div>
</div>
</div>
</div>