Authentic customer audio with a readable transcript
Live preview
The prompt
Build a voice-note testimonial player with Tailwind CSS. Include customer identity, company context, play/pause control, waveform, duration, playback progress, speed control, a highlighted quote, and an expandable transcript. Add JavaScript that simulates playback, updates progress and elapsed time, changes playback speed, and opens or closes the transcript with accurate aria-expanded state.
Build a voice-note testimonial player with Tailwind CSS. Include customer identity, company context, play/pause control, waveform, duration, playback progress, speed control, a highlighted quote, and an expandable transcript. Add JavaScript that simulates playback, updates progress and elapsed time, changes playback speed, and opens or closes the transcript with accurate aria-expanded state.
<div class="mx-auto max-w-2xl p-6"><figure class="rounded-3xl bg-neutral-950 p-6 text-white shadow-xl"><div class="flex items-center gap-4"><span class="flex h-12 w-12 items-center justify-center rounded-full bg-cyan-200 text-sm font-semibold text-neutral-900">LN</span><figcaption class="flex-1"><p class="font-medium">Lea Novak</p><p class="text-xs text-white/45">COO at Common Thread · 86 people</p></figcaption><span class="rounded-full border border-white/10 px-3 py-1 text-xs text-white/45">Verified customer</span></div><blockquote class="mt-7 text-2xl font-medium leading-snug tracking-tight">“We stopped asking where the work stood. The answer was already visible.”</blockquote><div class="mt-7 rounded-2xl bg-white/5 p-4"><div class="flex items-center gap-4"><button id="voiceTestPlay" class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-cyan-300 text-neutral-950" aria-label="Play testimonial"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m9 7 9 5-9 5V7Z" fill="currentColor" stroke="none"/></svg></button><div class="min-w-0 flex-1"><div id="voiceTestWave" class="flex h-9 items-center gap-1"></div><div class="mt-2 flex justify-between font-mono text-[10px] text-white/40"><span id="voiceTestTime">0:00</span><span>0:38</span></div></div><button id="voiceTestSpeed" class="rounded-lg border border-white/10 px-2 py-1 text-xs text-white/60">1×</button></div></div><button id="voiceTranscriptToggle" aria-expanded="false" class="mt-4 text-xs font-medium text-cyan-300">Read transcript</button><div id="voiceTestTranscript" class="mt-3 hidden border-l border-white/15 pl-4 text-sm leading-6 text-white/55">Before Northstar, weekly planning meant stitching together four different reports. Now the operating picture is current before the meeting starts, and the team spends that hour making decisions.</div></figure></div>
Build a voice-note testimonial player with Tailwind CSS. Include customer identity, company context, play/pause control, waveform, duration, playback progress, speed control, a highlighted quote, and an expandable transcript. Add JavaScript that simulates playback, updates progress and elapsed time, changes playback speed, and opens or closes the transcript with accurate aria-expanded state.