Tailwind CSS Message Bubbles Blocks

Message Bubbles

Message bubbles for preview cards, threaded comments, reply quotes, and inline-link conversations in chat and inbox interfaces.

Link Preview Message Bubble with Website Card Pro

Left-aligned message bubble pairs a short text message with a website preview card inside the same conversation stack.

<div class="w-full space-y-5">
                        
                        <div class="max-w-md flex gap-x-2">
                          <div class="shrink-0 mt-auto">
                            <img class="shrink-0 size-8 rounded-full" src="https://images.unsplash.com/photo-1601935111741-ae98b2b230b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                          </div>
      
                          
                          <div>
                            <p class="mb-1.5 ps-2.5 text-xs text-muted-foreground">Costa</p>
        
                            <div class="space-y-1">
                              
                              <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">
                                    Hi, I'd like to ask some questions. Can I use Preline UI on a client project?
                                    <a class="group block mt-3 mb-1 focus:outline-hidden" href="https://preline.co/" target="_blank">
                                      <span class="text-primary underline">
                                        https://preline.co/
                                      </span>

<div class="p-2 ps-2.5 mt-2 relative cursor-default bg-primary-50 rounded-lg overflow-hidden group-focus:scale-[.98] transition before:absolute before:inset-y-0 before:inset-s-0 before:w-1 before:h-full before:bg-primary dark:bg-primary-500/10">
                                        <p class="font-medium text-xs text-primary">Preline</p>
                                        <p class="font-semibold text-xs text-foreground">Preline UI, crafted with Tailwind CSS</p>
                                        <p class="text-xs text-foreground">Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.</p>
                                        <img class="mt-1 rounded-md" src="https://preline.co/hero-image-2.jpg" alt="Website Preview Image">
                                      </div>
                                    </a>
      
                                    <span>
                                      <span class="text-[11px] text-muted-foreground italic">11:27</span>
                                    </span>
                                  </div>
                                </div>

<div class="order-2 lg:opacity-0 lg:group-hover:opacity-100">
                                  <div class="hs-dropdown --exclude-from-auto-opening [--strategy:absolute] [--auto-close:inside]  relative inline-flex">
                                    <button id="hs-pro-cht1cmd_1" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm text-muted-foreground-1 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                      <svg class="shrink-0 size-4 rounded-full" 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"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                                    </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-32 transition-[opacity,margin] duration opacity-0 hidden z-8 bg-dropdown-1 border border-dropdown-line rounded-xl shadow-lg before:h-4 before:absolute before:-top-4 before:inset-s-0 before:w-full after:h-4 after:absolute after:-bottom-4 after:inset-s-0 after:w-full" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-cht1cmd_1">
                                      <div class="p-1">
                                        <a class="flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                          <svg class="shrink-0 size-3.5" 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"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                                          Edit
                                        </a>
                                        <a class="flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                          <svg class="shrink-0 size-3.5" 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"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="m10 7-3 3 3 3"/><path d="M17 13v-1a2 2 0 0 0-2-2H7"/></svg>
                                          Reply
                                        </a>
                                        <a class="flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                          <svg class="shrink-0 size-3.5" 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"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                          Delete
                                        </a>
                                      </div>
                                    </div>
                                    
                                  </div>
                                </div>
                                
                              </div>

</div>
                          </div>
                          
                        </div>
                        
                      </div>

Open related help desk chat template

Thread Comment Bubble with Reaction Chip Pro

Thread comment bubble stacks short replies with a reaction chip and comment actions inside an inbox discussion thread.

<div class="px-4 space-y-0.5">
                    <div class="ps-12 flex flex-wrap items-center gap-2">
                      <span class="text-xs text-muted-foreground-1">
                        Isabella Lauda
                      </span>
                    </div>

<div class="group w-full lg:flex lg:gap-x-3">
                      <div class="flex gap-x-4">
                        <div class="shrink-0 size-8 text-center">
                          <span class="flex shrink-0 justify-center items-center size-8 text-sm uppercase bg-purple-500 text-foreground-inverse rounded-full">I</span>
                        </div>
      
                        <div class="-ms-2 self-center w-full max-w-xl">
                          <div class="flex items-start gap-x-1" style="word-break: break-word;">
                            <div class="py-1.5 px-2.5 inline-block bg-surface-1 rounded-2xl">
                              <div class="text-sm text-muted-foreground-2">
                                <span class="text-blue-500">@lewis_clarke</span> Hi Lewis
              
                                <span class="italic text-[11px] text-muted-foreground-1">
                                  10:20
                                </span>
                              </div>
                            </div>

<div class="lg:hidden">
                              
                              <button type="button" class="hs-collapse-toggle flex justify-center items-center gap-x-3 size-8 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" id="hs-pro-in1tctclid1_1" aria-expanded="false" aria-controls="hs-pro-in1tctclid1_1-heading" data-hs-collapse="#hs-pro-in1tctclid1_1-heading">
                                <span class="sr-only">Collapse</span>
                                <svg class="hs-collapse-open:rotate-180 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"><path d="m6 9 6 6 6-6"/></svg>
                              </button>
                              
                            </div>
                          </div>

<div class="mt-1 flex items-center gap-x-1">
                            <div class="hs-tooltip inline-block">
                              <span class="hs-tooltip-toggle py-px ps-1.5 pe-2 flex bg-primary-100 border border-primary-200 rounded-full dark:bg-primary-500/20 dark:border-primary-500/30">
                                <span class="text-sm text-primary">
                                  ✋ 1
                                </span>
                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                  Lewis reacted
                                </span>
                              </span>
                            </div>

<div class="hs-tooltip inline-block">
                              <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-7 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                <svg class="shrink-0 size-3.5" 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"><path d="M22 11v1a10 10 0 1 1-9-10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" x2="9.01" y1="9" y2="9"/><line x1="15" x2="15.01" y1="9" y2="9"/><path d="M16 5h6"/><path d="M19 2v6"/></svg>
                                <span class="sr-only">Add reaction</span>
                              </button>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                Add reaction
                              </span>
                            </div>
                            
                          </div>
                        </div>
                      </div>

<div id="hs-pro-in1tctclid1_1-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300 lg:w-auto lg:block lg:group-hover:opacity-100 lg:opacity-0" aria-labelledby="hs-pro-in1tctclid1_1" role="region">
                        
                        <div class="my-1 lg:mt-0 ms-10 lg:ms-0 p-0.5 bg-layer rounded-full shadow-2xs inline-flex items-center gap-0.5">
                          
                          <div class="hs-tooltip inline-block">
                            <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-7 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                              <svg class="shrink-0 size-3.5" 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"><path d="M22 11v1a10 10 0 1 1-9-10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" x2="9.01" y1="9" y2="9"/><line x1="15" x2="15.01" y1="9" y2="9"/><path d="M16 5h6"/><path d="M19 2v6"/></svg>
                              <span class="sr-only">Add reaction</span>
                            </button>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                              Add reaction
                            </span>
                          </div>

<div class="hs-tooltip inline-block">
                            <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-7 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                              <svg class="shrink-0 size-3.5" 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"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg>
                              <span class="sr-only">Reply</span>
                            </button>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                              Reply
                            </span>
                          </div>

<div class="hs-tooltip inline-block">
                            <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-7 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                              <svg class="shrink-0 size-3.5" 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"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
                              <span class="sr-only">Edit</span>
                            </button>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                              Edit
                            </span>
                          </div>

<div class="hs-tooltip inline-block">
                            <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-7 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                              <svg class="shrink-0 size-3.5" 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"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                              <span class="sr-only">Delete</span>
                            </button>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                              Delete
                            </span>
                          </div>
                          
                        </div>
                        
                      </div>
                      
                    </div>
                  </div>

Open related shared inbox template

Reply Quote Message Bubble with Quoted Snippet Pro

Right-aligned message bubble embeds a quoted reply snippet above the active response inside the same bubble stack.

<div class="w-full space-y-5">

<div class="max-w-md ms-auto text-end flex justify-end gap-x-2">
                          
                          <div>
                            <p class="mb-1.5 pe-2.5 text-xs text-muted-foreground">James</p>
        
                            <div class="space-y-1">

<div class="group flex justify-end gap-x-2" style="word-break: break-word;">
                                <div class="order-2 text-start bg-primary-100 shadow-2xs 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="mb-2 py-1 ps-2.5 pe-1.5 relative cursor-default bg-primary-50 before:bg-primary dark:bg-primary-500/10 rounded-lg overflow-hidden group-focus:scale-[.98] transition before:absolute before:inset-y-0 before:inset-s-0 before:w-1 before:h-full">
                                      <blockquote>
                                        <p class="font-medium text-[13px] text-primary">Costa Quinn</p>
                                        <p class="text-[13px] text-foreground">Hi, I'd like to ask some questions. Can I use Preline UI on a client project?</p>
                                      </blockquote>
                                    </div>
                                    Yes, you can!
      
                                    <span>
                                      <span class="text-[11px] text-end text-muted-foreground italic">12:44</span>
                                      <svg class="inline-block shrink-0 size-4 text-muted-foreground" 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"><path d="M18 6 7 17l-5-5"/><path d="m22 10-7.5 7.5L13 16"/></svg>
                                    </span>
                                  </div>
                                </div>

<div class="order-1 lg:opacity-0 lg:group-hover:opacity-100">
                                  <div class="hs-dropdown --exclude-from-auto-opening [--strategy:absolute] [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                                    <button id="hs-pro-cht1cmd_3" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm text-muted-foreground-1 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                      <svg class="shrink-0 size-4 rounded-full" 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"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                                    </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-32 transition-[opacity,margin] duration opacity-0 hidden z-8 bg-dropdown-1 border border-dropdown-line rounded-xl shadow-lg before:h-4 before:absolute before:-top-4 before:inset-s-0 before:w-full after:h-4 after:absolute after:-bottom-4 after:inset-s-0 after:w-full" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-cht1cmd_3">
                                      <div class="p-1">
                                        <a class="flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                          <svg class="shrink-0 size-3.5" 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"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                                          Edit
                                        </a>
                                        <a class="flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                          <svg class="shrink-0 size-3.5" 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"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="m10 7-3 3 3 3"/><path d="M17 13v-1a2 2 0 0 0-2-2H7"/></svg>
                                          Reply
                                        </a>
                                        <a class="flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                          <svg class="shrink-0 size-3.5" 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"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                          Delete
                                        </a>
                                      </div>
                                    </div>
                                    
                                  </div>
                                </div>
                                
                              </div>

</div>
                          </div>
                          
      
                          <div class="shrink-0 mt-auto">
                            <img class="shrink-0 size-8 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                          </div>
                        </div>
                        
                      </div>

Open related help desk chat template

Text Message Bubble with Inline Links Pro

Left-aligned text message bubble uses linked email and domain text inside a plain multi-message conversation thread.

<div class="w-full space-y-4">

<div class="max-w-md flex gap-x-2">
                          <div class="shrink-0 mt-auto">
                            <span class="flex shrink-0 justify-center items-center size-8 text-xs font-medium uppercase rounded-full bg-sky-500 text-foreground-inverse">
                              S
                            </span>
                          </div>

<div>
                            <p class="mb-1.5 ps-2.5 text-xs text-muted-foreground">Sun</p>
        
                            <div class="space-y-1">

<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">
                                    Looks like user entered the wrong email <a class="break-all text-primary underline" href="#">annarichard@gmail.cm</a> (typo at <a class="break-all text-primary underline" href="#">gmail.cm</a>) - we will send a new email to <a class="break-all text-primary underline" href="#">annarichard@gmail.com</a> with a link to create an account in a moment.
      
                                    <span>
                                      <span class="text-[11px] text-muted-foreground italic">10:27</span>
                                    </span>
                                  </div>
                                </div>

<div class="order-2 lg:opacity-0 lg:group-hover:opacity-100">
                                  <div class="hs-dropdown --exclude-from-auto-opening [--strategy:absolute] [--auto-close:inside]  relative inline-flex">
                                    <button id="hs-pro-cht4cmd_9" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm text-muted-foreground-1 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                      <svg class="shrink-0 size-4 rounded-full" 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"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                                    </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-32 transition-[opacity,margin] duration opacity-0 hidden z-8 bg-dropdown-1 border border-dropdown-line rounded-xl shadow-lg before:h-4 before:absolute before:-top-4 before:inset-s-0 before:w-full after:h-4 after:absolute after:-bottom-4 after:inset-s-0 after:w-full" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-cht4cmd_9">
                                      <div class="p-1">
                                        <a class="flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                          <svg class="shrink-0 size-3.5" 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"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                                          Edit
                                        </a>
                                        <a class="flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                          <svg class="shrink-0 size-3.5" 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"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="m10 7-3 3 3 3"/><path d="M17 13v-1a2 2 0 0 0-2-2H7"/></svg>
                                          Reply
                                        </a>
                                        <a class="flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                          <svg class="shrink-0 size-3.5" 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"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                          Delete
                                        </a>
                                      </div>
                                    </div>
                                    
                                  </div>
                                </div>
                                
                              </div>

Open related help desk chat template