VibeCoderzVibeCoderz
All Prompts
Feature Badge Section with Dark Gradient Background preview
sectionbadgepilltailwindgradientdarkresponsivemarketing

Feature Badge Section with Dark Gradient Background

Секция с баджами-фичами на темном градиенте. Отображает цветные статусы и текст. Адаптивный дизайн, подходит для лендингов.

Prompt

<section class="relative overflow-hidden ring-1 ring-white/10 bg-neutral-900/60 rounded-2xl px-6 py-6 max-w-xl">
          <div class="absolute inset-0">
            <img src="https://images.unsplash.com/photo-1520052205864-92d242b3a76f?q=80&amp;w=1800&amp;auto=format&amp;fit=crop" class="h-full w-full object-cover opacity-[0.04]" alt="">
            <div class="absolute inset-0 bg-gradient-to-b from-transparent to-neutral-900/60"></div>
          </div>

          <div class="relative">
            <div class="flex flex-wrap gap-2">
              <span class="inline-flex items-center gap-2 rounded-full bg-white/5 px-3 py-1 text-xs text-white ring-1 ring-white/10">
                <span class="h-1.5 w-1.5 rounded-full bg-emerald-400"></span> Scene-aware sync
              </span>
              <span class="inline-flex items-center gap-2 rounded-full bg-white/5 px-3 py-1 text-xs text-white ring-1 ring-white/10">
                <span class="h-1.5 w-1.5 rounded-full bg-sky-400"></span> Neural stems
              </span>
              <span class="inline-flex items-center gap-2 rounded-full bg-white/5 px-3 py-1 text-xs text-white ring-1 ring-white/10">
                <span class="h-1.5 w-1.5 rounded-full bg-orange-400"></span> Emotion cues
              </span>
              <span class="inline-flex items-center gap-2 rounded-full bg-white/5 px-3 py-1 text-xs text-white ring-1 ring-white/10">
                <span class="h-1.5 w-1.5 rounded-full bg-fuchsia-400"></span> Moodboard sync
              </span>
              <span class="inline-flex items-center gap-2 rounded-full bg-white/5 px-3 py-1 text-xs text-white ring-1 ring-white/10">
                <span class="h-1.5 w-1.5 rounded-full bg-blue-400"></span> Video overlay
              </span>
              <span class="inline-flex items-center gap-2 rounded-full bg-white/5 px-3 py-1 text-xs text-white ring-1 ring-white/10">
                <span class="h-1.5 w-1.5 rounded-full bg-violet-400"></span> Fingerprinting
              </span>
              <span class="inline-flex items-center gap-2 rounded-full bg-white/5 px-3 py-1 text-xs text-white ring-1 ring-white/10">
                <span class="h-1.5 w-1.5 rounded-full bg-amber-400"></span> Dynamic faders
              </span>
              <span class="inline-flex items-center gap-2 rounded-full bg-white/5 px-3 py-1 text-xs text-white ring-1 ring-white/10">
                <span class="h-1.5 w-1.5 rounded-full bg-rose-400"></span> Behavioral cues
              </span>
              <span class="inline-flex items-center gap-2 rounded-full bg-white/5 px-3 py-1 text-xs text-white ring-1 ring-white/10">
                <span class="h-1.5 w-1.5 rounded-full bg-lime-400"></span> Contextual mix
              </span>
            </div>

            <p class="mt-6 max-w-xl text-sm text-neutral-300">Precision that listens. EchoFlux interprets intent and context to suggest arrangements, textures, and dynamics that fit the moment.</p>
          </div>
        </section>
All Prompts