All Prompts
All Prompts

carddashboardstatustailwindactivitydevopsctaresponsive
Release & Deployment Status Card
Карточка статуса релиза и деплоя для дашборда. Отображает прогресс, CTA для приватного облака. Идеально для DevOps, SaaS.
Prompt
<div class="max-w-xl mr-auto ml-auto">
<div class="ring-1 ring-white/10 shadow-black/40 bg-white/5 rounded-[28px] shadow-2xl backdrop-blur">
<div class="sm:p-6 border-white/10 border-b pt-5 pr-5 pb-5 pl-5">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="h-9 w-9 rounded-full bg-white/10 flex items-center justify-center ring-1 ring-inset ring-white/15">
<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="refresh-ccw" class="lucide lucide-refresh-ccw w-5 h-5 text-white/80"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path><path d="M16 16h5v5"></path></svg>
</div>
<h3 class="text-[20px] sm:text-[22px] font-semibold tracking-tight text-white">
Create a release
</h3>
</div>
<div class="flex items-center gap-2 text-emerald-400">
<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="check-circle-2" class="lucide lucide-check-circle-2 w-5 h-5"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg>
</div>
</div>
<div class="mt-4 space-y-2.5">
<div class="flex items-start gap-3 rounded-xl border border-white/10 bg-white/[0.03] px-3.5 py-3">
<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="badge-check" class="lucide lucide-badge-check w-4.5 h-4.5 text-emerald-400 mt-0.5"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"></path><path d="m9 12 2 2 4-4"></path></svg>
<div class="flex-1">
<p class="text-sm text-white/90 font-medium">
Release created for <span class="text-white">Orbital Commerce</span> v1.8.0
</p>
<p class="text-[13px] text-white/60">Changelog archived and signed</p>
</div>
</div>
<div class="flex items-start gap-3 rounded-xl border border-white/10 bg-white/[0.02] px-3.5 py-3">
<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="server" class="lucide lucide-server w-4.5 h-4.5 text-sky-300 mt-0.5"><rect width="20" height="8" x="2" y="2" rx="2" ry="2"></rect><rect width="20" height="8" x="2" y="14" rx="2" ry="2"></rect><line x1="6" x2="6.01" y1="6" y2="6"></line><line x1="6" x2="6.01" y1="18" y2="18"></line></svg>
<div class="flex-1">
<p class="text-sm text-white/80 font-medium">Propagated assets to edge network</p>
<p class="text-[13px] text-white/55">Static assets served from 42 regions</p>
</div>
</div>
</div>
</div>
<div class="px-5 py-4 sm:px-6 sm:py-5 border-b border-white/10">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="h-9 w-9 rounded-full bg-white/7 flex items-center justify-center ring-1 ring-inset ring-white/12">
<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="git-branch" class="lucide lucide-git-branch w-5 h-5 text-white/70"><line x1="6" x2="6" y1="3" y2="15"></line><circle cx="18" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><path d="M18 9a9 9 0 0 1-9 9"></path></svg>
</div>
<p class="text-[18px] font-medium text-white/80">Push to CodeForge</p>
</div>
<div class="flex items-center gap-2 text-white/40">
<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="clock" class="lucide lucide-clock w-5 h-5"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></svg>
</div>
</div>
<div class="mt-3 ml-[52px] space-y-2">
<div class="flex items-center gap-2 text-[13px] text-white/55">
<span class="inline-flex h-1.5 w-1.5 rounded-full bg-white/30"></span>
Preparing pull request on main
</div>
<div class="flex items-center gap-2 text-[13px] text-white/55">
<span class="inline-flex h-1.5 w-1.5 rounded-full bg-white/30"></span>
Awaiting review checks
</div>
</div>
</div>
<div class="p-6 sm:p-7">
<h2 class="text-[26px] sm:text-[28px] font-semibold tracking-tight text-white">
Private Cloud Deployment
</h2>
<p class="mt-2 text-[15px] leading-6 text-white/70">
Run <span class="text-white">Nebula.studio</span> in your own VPC for advanced control, data residency, and enterprise security.
</p>
<div class="mt-5 flex flex-wrap items-center gap-3">
<button class="inline-flex items-center gap-2 rounded-xl bg-white text-neutral-900 px-4 py-2.5 text-sm font-medium shadow-sm hover:bg-white/90 transition">
<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="download-cloud" class="lucide lucide-download-cloud w-4.5 h-4.5"><path d="M12 13v8l-4-4"></path><path d="m12 21 4-4"></path><path d="M4.393 15.269A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.436 8.284"></path></svg>
Get install guide
</button>
<button class="inline-flex items-center gap-2 rounded-xl bg-white/10 px-4 py-2.5 text-sm font-medium text-white hover:bg-white/15 ring-1 ring-inset ring-white/15 transition">
<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="shield" class="lucide lucide-shield w-4.5 h-4.5 text-white/90"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path></svg>
Security overview
</button>
</div>
</div>
</div>
</div>