All Prompts
All Prompts

cardtailwindloadinganimatedglassmorphismdashboardfeatureprocessing
Feature Card with Processing Overlay
Карточка с анимированным оверлеем «Processing…» на Tailwind CSS. Для отображения статуса загрузки в дашбордах и аналитике.
Prompt
<article
class="overflow-hidden border-white/10 border rounded-[28px] relative shadow-[0_0_0_1px_rgba(255,255,255,0.02)_inset,0_10px_30px_-10px_rgba(0,0,0,0.6)] mx-auto max-w-xl m-12">
<div
class="absolute inset-0 opacity-[0.22] [mask-image:radial-gradient(120%_80%_at_50%_0%,black,transparent)] bg-[linear-gradient(to_right,rgba(255,255,255,0.04)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.04)_1px,transparent_1px)] [background-size:40px_40px] pointer-events-none">
</div>
<!-- Visual -->
<div class="md:h-72 h-64 pt-6 pr-6 pb-6 pl-6 relative">
<div class="opacity-60 absolute top-0 right-0 bottom-0 left-0 blur-3xl translate-y-2"></div>
<div class="relative h-full w-full flex items-center justify-center">
<!-- Content blocks -->
<div class="grid grid-cols-3 gap-3 w-full max-w-md">
<div class="space-y-2">
<div class="h-16 rounded-xl bg-white/[0.06] border border-white/10"></div>
<div class="h-20 rounded-xl bg-white/[0.05] border border-white/10"></div>
</div>
<div class="space-y-2">
<div class="h-14 rounded-xl bg-white/[0.06] border border-white/10"></div>
<div class="h-24 rounded-xl bg-white/[0.05] border border-white/10"></div>
</div>
<div class="space-y-2">
<div class="h-12 rounded-xl bg-white/[0.06] border border-white/10"></div>
<div class="h-24 rounded-xl bg-white/[0.05] border border-white/10"></div>
</div>
</div>
<!-- Analyzing pill -->
<div class="absolute inset-0 flex items-center justify-center">
<div
class="rounded-xl border border-white/15 bg-white/[0.06] backdrop-blur supports-[backdrop-filter]:bg-white/10 px-3 py-2 shadow-[0_10px_20px_-5px_rgba(0,0,0,0.6)]">
<div class="flex items-center gap-2">
<span class="inline-block h-2 w-2 rounded-full bg-emerald-400 animate-pulse"></span>
<span class="text-xs font-medium text-white/85">Processing…</span>
</div>
</div>
</div>
</div>
</div>
<!-- Copy -->
<div class="relative p-6 pt-2">
<h3 class="text-lg font-semibold tracking-tight text-white/95">Scale effortlessly</h3>
<p class="mt-2 text-sm text-white/70">
Automatically handle millions of requests with intelligent load balancing and caching.
</p>
</div>
</article>