VibeCoderzVibeCoderz
Telegram
All Prompts
Feature Card with Processing Overlay preview
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>
All Prompts