VibeCoderzVibeCoderz
Telegram
All Prompts
Audio Collaboration Feature Card with Action Buttons preview
feature-sectioncardtailwindaudioicon-buttonsgradientpromoresponsive

Audio Collaboration Feature Card with Action Buttons

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

Prompt

<section class="relative overflow-hidden ring-1 ring-white/10 bg-neutral-900/60 rounded-2xl pt-6 pr-6 pb-6 pl-6">
          <div class="pointer-events-none absolute -left-10 -top-14 h-64 w-64 rounded-full bg-gradient-to-br from-orange-500/15 to-amber-400/0 blur-2xl"></div>

          <div class="flex items-center gap-4">
            <div class="relative grid h-24 w-24 place-items-center ring-1 ring-white/10 bg-neutral-800/70 rounded-full">
              <div class="absolute inset-0 rounded-full bg-gradient-to-b from-white/5 to-transparent"></div>
              <div class="absolute inset-0 animate-pulse bg-orange-500/5 rounded-full"></div>
              <div class="relative flex h-14 w-14 items-center justify-center rounded-full bg-neutral-900 ring-1 ring-white/10">
                <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="music-3" class="lucide lucide-music-3 h-6 w-6 text-white/90"><circle cx="12" cy="18" r="4"></circle><path d="M16 18V2"></path></svg>
              </div>
              
              
            </div>
            <div class="">
              <h2 class="text-xl sm:text-2xl font-semibold tracking-tight text-white">Built for modern audio teams</h2>
              <p class="mt-2 max-w-md text-sm text-neutral-300">Craft, collaborate, and publish in one space—no context switching, no lost versions.</p>
            </div>
          </div>

          <div class="mt-6 flex items-center gap-3">
            <button class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-white/5 text-white ring-1 ring-white/10 hover:bg-white/10">
              <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="play" class="lucide lucide-play h-4 w-4"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg>
            </button>
            <button class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-white/5 text-white ring-1 ring-white/10 hover:bg-white/10">
              <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="mic-2" class="lucide lucide-mic-2 h-4 w-4"><path d="m11 7.601-5.994 8.19a1 1 0 0 0 .1 1.298l.817.818a1 1 0 0 0 1.314.087L15.09 12"></path><path d="M16.5 21.174C15.5 20.5 14.372 20 13 20c-2.058 0-3.928 2.356-6 2-2.072-.356-2.775-3.369-1.5-4.5"></path><circle cx="16" cy="7" r="5"></circle></svg>
            </button>
            <button class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-white/5 text-white ring-1 ring-white/10 hover:bg-white/10">
              <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="folder-plus" class="lucide lucide-folder-plus h-4 w-4"><path d="M12 10v6"></path><path d="M9 13h6"></path><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"></path></svg>
            </button>
          </div>

          <p class="mt-6 text-sm text-neutral-300">A platform designed to streamline creation, collaboration, and release management—so your ideas move faster than your deadlines.</p>
        </section>
All Prompts