Tailwind CSS Voice Messages Blocks

Voice Messages

Voice message patterns for waveform player cards and chat voice-note bubbles with compact playback controls.

Voice Message Player Card with Waveform and Duration Pro

Compact audio player card combines a play button, waveform visualization, and duration label inside a bordered chip.

<div class="py-1.5 px-2 inline-block bg-layer border border-layer-line shadow-2xs rounded-lg">
                      <div class="flex items-center gap-x-2">
                        <button type="button" class="flex justify-center items-center size-6 bg-primary hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus text-primary-foreground rounded-full">
                          <svg class="shrink-0 size-3" 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"><polygon points="6 3 20 12 6 21 6 3"></polygon></svg>
                        </button>

Incoming Voice Message Bubble with Waveform Pro

Incoming chat bubble pairs a sender label, waveform player, and duration stamp inside the neutral message shell.

<div class="group flex justify-start gap-x-2" style="word-break: break-word;">
                      <div class="order-1 bg-layer shadow-2xs inline-block rounded-xl pt-2 pb-1.5 px-2.5">
                        <div class="text-sm text-foreground">
                          <div class="flex items-center gap-x-2">
                            <button type="button" class="flex justify-center items-center size-9 bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus rounded-full">
                              <svg class="shrink-0 size-4" 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"><polygon points="6 3 20 12 6 21 6 3"/></svg>
                            </button>
                            <div class="grow">
                              <svg class="text-primary" width="77" height="19" viewBox="0 0 77 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect y="18" width="2" height="1" fill="currentColor"/>
                                <rect x="3" y="18" width="2" height="1" fill="currentColor"/>
                                <rect x="6" y="18" width="2" height="1" fill="currentColor"/>
                                <rect x="9" y="18" width="2" height="1" fill="currentColor"/>
                                <rect x="12" y="4" width="2" height="15" fill="currentColor"/>
                                <rect x="15" y="6" width="2" height="13" fill="currentColor"/>
                                <rect x="18" y="14" width="2" height="5" fill="currentColor"/>
                                <rect x="21" y="15" width="2" height="4" fill="currentColor"/>
                                <rect x="24" y="12" width="2" height="7" fill="currentColor"/>
                                <rect x="27" width="2" height="19" fill="currentColor"/>
                                <rect x="30" y="7" width="2" height="12" fill="currentColor"/>
                                <rect x="33" y="3" width="2" height="16" fill="currentColor"/>
                                <rect x="36" y="9" width="2" height="10" fill="currentColor"/>
                                <rect x="39" y="14" width="2" height="5" fill="currentColor"/>
                                <rect x="42" y="18" width="2" height="1" fill="currentColor"/>
                                <rect x="45" y="18" width="2" height="1" fill="currentColor"/>
                                <rect x="48" y="18" width="2" height="1" fill="currentColor"/>
                                <rect x="51" y="14" width="2" height="5" fill="currentColor"/>
                                <rect x="54" y="14" width="2" height="5" fill="currentColor"/>
                                <rect x="57" y="14" width="2" height="5" fill="currentColor"/>
                                <rect x="60" width="2" height="19" fill="currentColor"/>
                                <rect x="63" y="7" width="2" height="12" fill="currentColor"/>
                                <rect x="66" width="2" height="19" fill="currentColor"/>
                                <rect x="69" y="18" width="2" height="1" fill="currentColor"/>
                                <rect x="72" y="18" width="2" height="1" fill="currentColor"/>
                                <rect x="75" y="18" width="2" height="1" fill="currentColor"/>
                              </svg>
                              <div class="inline-flex items-center gap-x-1">
                                <p class="text-xs text-muted-foreground-1">
                                  00:08
                                </p>
                              </div>
                            </div>
                          </div>
                          
      
                          <span>
                            <span class="text-[11px] text-muted-foreground italic"></span>
                          </span>
                        </div>
                      </div>
                    </div>

Open related help desk template

Outgoing Voice Message Bubble with Highlighted Playback State Pro

Outgoing reply bubble uses highlighted message styling for the waveform player with a compact duration stamp.

<div class="group flex justify-start gap-x-2" style="word-break: break-word;">
                      <div class="order-1 bg-primary-100 dark:bg-primary-500/20 inline-block rounded-xl pt-2 pb-1.5 px-2.5">
                        <div class="text-sm text-foreground">
                          <div class="flex items-center gap-x-2">
                            <button type="button" class="flex justify-center items-center size-9 bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus rounded-full">
                              <svg class="shrink-0 size-4" 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"><polygon points="6 3 20 12 6 21 6 3"/></svg>
                            </button>
                            <div class="grow">
                              <svg class="text-primary" width="77" height="19" viewBox="0 0 77 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect y="18" width="2" height="1" fill="currentColor"/>
                                <rect x="3" y="18" width="2" height="1" fill="currentColor"/>
                                <rect x="6" y="18" width="2" height="1" fill="currentColor"/>
                                <rect x="9" y="18" width="2" height="1" fill="currentColor"/>
                                <rect x="12" y="4" width="2" height="15" fill="currentColor"/>
                                <rect x="15" y="6" width="2" height="13" fill="currentColor"/>
                                <rect x="18" y="14" width="2" height="5" fill="currentColor"/>
                                <rect x="21" y="15" width="2" height="4" fill="currentColor"/>
                                <rect x="24" y="12" width="2" height="7" fill="currentColor"/>
                                <rect x="27" width="2" height="19" fill="currentColor"/>
                                <rect x="30" y="7" width="2" height="12" fill="currentColor"/>
                                <rect x="33" y="3" width="2" height="16" fill="currentColor"/>
                                <rect x="36" y="9" width="2" height="10" fill="currentColor"/>
                                <rect x="39" y="14" width="2" height="5" fill="currentColor"/>
                                <rect x="42" y="18" width="2" height="1" fill="currentColor"/>
                                <rect x="45" y="18" width="2" height="1" fill="currentColor"/>
                                <rect x="48" y="18" width="2" height="1" fill="currentColor"/>
                                <rect x="51" y="14" width="2" height="5" fill="currentColor"/>
                                <rect x="54" y="14" width="2" height="5" fill="currentColor"/>
                                <rect x="57" y="14" width="2" height="5" fill="currentColor"/>
                                <rect x="60" width="2" height="19" fill="currentColor"/>
                                <rect x="63" y="7" width="2" height="12" fill="currentColor"/>
                                <rect x="66" width="2" height="19" fill="currentColor"/>
                                <rect x="69" y="18" width="2" height="1" fill="currentColor"/>
                                <rect x="72" y="18" width="2" height="1" fill="currentColor"/>
                                <rect x="75" y="18" width="2" height="1" fill="currentColor"/>
                              </svg>
                              <div class="inline-flex items-center gap-x-1">
                                <p class="text-xs text-muted-foreground-1">
                                  00:08
                                </p>
                                <span class="inline-block size-1.5 rounded-full bg-primary"></span>
                              </div>
                            </div>
                          </div>
                          
      
                          <span>
                            <span class="text-[11px] text-muted-foreground italic"></span>
                          </span>
                        </div>
                      </div>
                    </div>

Open related admin chat template