Загрузка...

Секция с баджами-фичами на темном градиенте. Отображает цветные статусы и текст. Адаптивный дизайн, подходит для лендингов.
<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&w=1800&auto=format&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>