Tailwind CSS Inbox Threads Blocks

Inbox Threads

Inbox thread patterns for expanded email cards and reply composers with recipient fields, rich text editing, and threaded conversation details.

Email Thread Reply Composer with Recipient Fields Pro

Reply composer combines sender summary, recipient token fields, optional subject line, rich text editor, and send actions.

<div class="m-0.5 bg-layer rounded-2xl shadow-xs">
                      
                      
                      <div class="py-2 px-4 border-b border-line-2">
                        <div class="sm:flex gap-x-3">
                          <div class="grow">
                            
                            <div class="flex min-h-8.5 gap-x-2">
                              <span class="mt-[7px] text-sm text-muted-foreground-1">
                                From:
                              </span>

<div class="p-0.5 pe-2 m-0.5 flex flex-nowrap items-center gap-x-1.5">
                                <img class="shrink-0 size-6 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 class="whitespace-nowrap text-sm text-foreground">
                                  James Collins
                                </div>
                              </div>
                              
                            </div>

<div class="flex min-h-8.5 gap-x-2">
                              <span class="mt-[7px] text-sm text-muted-foreground-1">
                                To:
                              </span>

<select  multiple data-hs-select='{
                                "placeholder": "Enter email or name",
                                "dropdownClasses": "mt-2 z-85 w-full max-w-xs max-h-72 p-1 bg-select border border-select-line rounded-lg shadow-lg overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                "dropdownScope": "window",
                                "dropdownPlacement": "bottom-left",
                                "optionClasses": "py-1 px-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50",
                                "mode": "tags",
                                "wrapperClasses": "relative px-0.5 flex items-center flex-wrap text-nowrap w-full text-start text-sm",
                                "tagsItemTemplate": "<div class=\"flex flex-nowrap items-center relative z-1 bg-layer border border-layer-line rounded-full p-0.5 pe-1 m-0.5\"><div class=\"shrink-0 size-6 me-1.5\" data-icon></div><div class=\"whitespace-nowrap text-foreground\" data-title></div><div class=\"inline-flex shrink-0 justify-center items-center size-5 ms-1 rounded-full text-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus text-sm cursor-pointer\" data-remove><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\"><path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/></svg></div></div>",
                                "tagsInputId": "hs-pro-in1trtotid1",
                                "tagsInputClasses": "py-0 px-2 rounded-lg grow order-1 sm:text-sm text-base outline-hidden bg-transparent border-transparent focus:ring-0 text-foreground placeholder:text-muted-foreground-1",
                                "optionTemplate": "<div class=\"flex items-center\"><div class=\"shrink-0 size-6 me-3\" data-icon></div><div class=\"truncate\"><div class=\"text-sm text-foreground\" data-title></div><div class=\"truncate text-xs text-muted-foreground-1\" data-description></div></div><div class=\"ms-auto\"><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"><path d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z\"/></svg></span></div></div>"
                              }' class="hidden">
                                <option value="">Choose</option>
                                <option selected  value="1" data-hs-select-option='{
                                    "description": "schen@company.com",
                                    "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-surface-3 text-foreground-inverse rounded-full\">S</span>"
                                  }'>Sarah Chen</option>
                                <option   value="2" data-hs-select-option='{
                                    "description": "david1harris@example.com",
                                    "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                  }'>David Harrisom</option>
                                <option   value="3" data-hs-select-option='{
                                    "description": "lewis@company.com",
                                    "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                  }'>Lewis Clarke</option>
                                <option   value="4" data-hs-select-option='{
                                    "description": "isabella@site.com",
                                    "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-purple-500 text-foreground-inverse rounded-full\">I</span>"
                                  }'>Isabella Lauda</option>
                                <option   value="5" data-hs-select-option='{
                                    "description": "chrstiwilliams@site.so",
                                    "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-orange-500 text-foreground-inverse rounded-full\">C</span>"
                                  }'>Christina Williams</option>
                                <option   value="6" data-hs-select-option='{
                                    "description": "amanda@preline.so",
                                    "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                  }'>Amanda Harvey</option>
                              </select>

</div>

<div id="hs-pro-in1trcccid1-heading" class="hs-collapse w-full overflow-hidden open" aria-labelledby="hs-pro-in1trcccid1" role="region">
                              <div class="flex min-h-8.5 gap-x-2">
                                <span class="mt-[7px] text-sm text-muted-foreground-1">
                                  Cc:
                                </span>

<select  multiple data-hs-select='{
                                  "placeholder": "Enter email or name",
                                  "dropdownClasses": "mt-2 z-85 w-full max-w-xs max-h-72 p-1 bg-select border border-select-line rounded-lg shadow-lg overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                  "dropdownScope": "window",
                                  "dropdownPlacement": "bottom-left",
                                  "optionClasses": "py-1 px-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50",
                                  "mode": "tags",
                                  "wrapperClasses": "relative px-0.5 flex items-center flex-wrap text-nowrap w-full text-start text-sm",
                                  "tagsItemTemplate": "<div class=\"flex flex-nowrap items-center relative z-1 bg-layer border border-layer-line rounded-full p-0.5 pe-1 m-0.5\"><div class=\"shrink-0 size-6 me-1.5\" data-icon></div><div class=\"whitespace-nowrap text-foreground\" data-title></div><div class=\"inline-flex shrink-0 justify-center items-center size-5 ms-1 rounded-full text-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus text-sm cursor-pointer\" data-remove><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\"><path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/></svg></div></div>",
                                  "tagsInputId": "hs-pro-in1trcctid1",
                                  "tagsInputClasses": "py-0 px-2 rounded-lg grow order-1 sm:text-sm text-base outline-hidden bg-transparent border-transparent focus:ring-0 text-foreground placeholder:text-muted-foreground-1",
                                  "optionTemplate": "<div class=\"flex items-center\"><div class=\"shrink-0 size-6 me-3\" data-icon></div><div class=\"truncate\"><div class=\"text-sm text-foreground\" data-title></div><div class=\"truncate text-xs text-muted-foreground-1\" data-description></div></div><div class=\"ms-auto\"><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"><path d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z\"/></svg></span></div></div>"
                                }' class="hidden">
                                  <option value="">Choose</option>
                                  <option   value="1" data-hs-select-option='{
                                      "description": "schen@company.com",
                                      "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-surface-3 text-foreground-inverse rounded-full\">S</span>"
                                    }'>Sarah Chen</option>
                                  <option   value="2" data-hs-select-option='{
                                      "description": "david1harris@example.com",
                                      "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                    }'>David Harrisom</option>
                                  <option selected  value="3" data-hs-select-option='{
                                      "description": "lewis@company.com",
                                      "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                    }'>Lewis Clarke</option>
                                  <option selected  value="4" data-hs-select-option='{
                                      "description": "isabella@site.com",
                                      "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-purple-500 text-foreground-inverse rounded-full\">I</span>"
                                    }'>Isabella Lauda</option>
                                  <option   value="5" data-hs-select-option='{
                                      "description": "chrstiwilliams@site.so",
                                      "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-orange-500 text-foreground-inverse rounded-full\">C</span>"
                                    }'>Christina Williams</option>
                                  <option   value="6" data-hs-select-option='{
                                      "description": "amanda@preline.so",
                                      "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                    }'>Amanda Harvey</option>
                                </select>

</div>
                            </div>

<div id="hs-pro-in1trbcccid1-heading" class="hs-collapse w-full overflow-hidden hidden" aria-labelledby="hs-pro-in1trbcccid1" role="region">
                              <div class="flex min-h-8.5 gap-x-2">
                                <span class="mt-[7px] text-sm text-muted-foreground-1">
                                  Bcc:
                                </span>

<select  multiple data-hs-select='{
                                  "placeholder": "Enter email or name",
                                  "dropdownClasses": "mt-2 z-85 w-full max-w-xs max-h-72 p-1 bg-select border border-select-line rounded-lg shadow-lg overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                  "dropdownScope": "window",
                                  "dropdownPlacement": "bottom-left",
                                  "optionClasses": "py-1 px-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50",
                                  "mode": "tags",
                                  "wrapperClasses": "relative px-0.5 flex items-center flex-wrap text-nowrap w-full text-start text-sm",
                                  "tagsItemTemplate": "<div class=\"flex flex-nowrap items-center relative z-1 bg-layer border border-layer-line rounded-full p-0.5 pe-1 m-0.5\"><div class=\"shrink-0 size-6 me-1.5\" data-icon></div><div class=\"whitespace-nowrap text-foreground\" data-title></div><div class=\"inline-flex shrink-0 justify-center items-center size-5 ms-1 rounded-full text-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus text-sm cursor-pointer\" data-remove><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\"><path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/></svg></div></div>",
                                  "tagsInputId": "hs-pro-in1trbcctid1",
                                  "tagsInputClasses": "py-0 px-2 rounded-lg grow order-1 sm:text-sm text-base outline-hidden bg-transparent border-transparent focus:ring-0 text-foreground placeholder:text-muted-foreground-1",
                                  "optionTemplate": "<div class=\"flex items-center\"><div class=\"shrink-0 size-6 me-3\" data-icon></div><div class=\"truncate\"><div class=\"text-sm text-foreground\" data-title></div><div class=\"truncate text-xs text-muted-foreground-1\" data-description></div></div><div class=\"ms-auto\"><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"><path d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z\"/></svg></span></div></div>"
                                }' class="hidden">
                                  <option value="">Choose</option>
                                  <option   value="1" data-hs-select-option='{
                                      "description": "schen@company.com",
                                      "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-surface-3 text-foreground-inverse rounded-full\">S</span>"
                                    }'>Sarah Chen</option>
                                  <option   value="2" data-hs-select-option='{
                                      "description": "david1harris@example.com",
                                      "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                    }'>David Harrisom</option>
                                  <option   value="3" data-hs-select-option='{
                                      "description": "lewis@company.com",
                                      "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                    }'>Lewis Clarke</option>
                                  <option   value="4" data-hs-select-option='{
                                      "description": "isabella@site.com",
                                      "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-purple-500 text-foreground-inverse rounded-full\">I</span>"
                                    }'>Isabella Lauda</option>
                                  <option   value="5" data-hs-select-option='{
                                      "description": "chrstiwilliams@site.so",
                                      "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-orange-500 text-foreground-inverse rounded-full\">C</span>"
                                    }'>Christina Williams</option>
                                  <option   value="6" data-hs-select-option='{
                                      "description": "amanda@preline.so",
                                      "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                    }'>Amanda Harvey</option>
                                </select>

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

<button type="button" class="hs-collapse-toggle p-1 text-xs text-muted-foreground-2 rounded-md hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus " id="hs-pro-in1trsbcid1" aria-expanded="false" aria-controls="hs-pro-in1trsbcid1-heading" data-hs-collapse="#hs-pro-in1trsbcid1-heading">
                                Subject
                              </button>

<div class="hs-tooltip inline-block">
                                <button type="button" class="hs-tooltip-toggle hs-collapse-toggle flex shrink-0 justify-center items-center size-6 text-xs text-muted-foreground-2 rounded-md hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" data-hs-overlay="#hs-pro-intrprm">
                                  <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 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6"/><path d="m21 3-9 9"/><path d="M15 3h6v6"/></svg>
                                </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">
                                  Popout reply
                                </span>
                              </div>
                            </div>
                            
                          </div>
                        </div>
                      </div>

<div id="hs-pro-in1trsbcid1-heading" class="hs-collapse w-full overflow-hidden hidden" aria-labelledby="hs-pro-in1trsbcid1" role="region">
                        <div class="py-2.5 px-4 flex items-center gap-x-3 border-b border-line-2">
                          <span class="text-sm text-muted-foreground-1">
                            Subject:
                          </span>

<div class="grow">
                            <input type="text" id="hs-pro-in1trsbinid1" class="p-0 block w-full bg-transparent border-transparent rounded-0 sm:text-sm text-base text-foreground placeholder:text-muted-foreground-1 focus:outline-hidden focus:border-transparent focus:ring-transparent disabled:opacity-50 disabled:pointer-events-none" value="Re:Project Timeline Update">
                            <label for="hs-pro-in1trsbinid1" class="sr-only">Subject</label>
                          </div>
                        </div>
                      </div>

<div id="hs-editor-tiptap-1">
                        <div data-hs-editor-field></div>

<div class="p-2 border-t border-line-2">
                          <div class="flex flex-wrap items-center gap-0.5">
                            
                            <div class="hs-dropdown [--auto-close:inside] [--placement:top-left] relative inline-flex">
                              <div class="hs-tooltip [--placement:bottom] inline-block">
                                <button id="hs-pro-in1trfodid1" type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-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="M4 20h16"/><path d="m6 16 6-12 6 12"/><path d="M8 12h8"/></svg>
                                  <span class="sr-only">Formatting options</span>
                                </button>
                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-60 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                  Formatting options
                                </span>
                              </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-65.5 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown border border-line-2 rounded-xl shadow-lg" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-in1trfodid1">
                                
                                <div class="p-1">
                                  
                                  <div class="hs-tooltip inline-block">
                                    <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-bold>
                                      <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="M14 12a4 4 0 0 0 0-8H6v8"/><path d="M15 20a4 4 0 0 0 0-8H6v8Z"/></svg>
                                      <span class="sr-only">Bold</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">
                                      Bold
                                    </span>
                                  </div>

<div class="hs-tooltip inline-block">
                                    <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-italic>
                                      <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"><line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
                                      <span class="sr-only">Italic</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">
                                      Italic
                                    </span>
                                  </div>

<div class="hs-tooltip inline-block">
                                    <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-underline>
                                      <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="M6 4v6a6 6 0 0 0 12 0V4"/><line x1="4" x2="20" y1="20" y2="20"/></svg>
                                      <span class="sr-only">Underline</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">
                                      Underline
                                    </span>
                                  </div>

<div class="hs-tooltip inline-block">
                                    <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-strike>
                                      <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="M16 4H9a3 3 0 0 0-2.83 4"/><path d="M14 12a4 4 0 0 1 0 8H6"/><line x1="4" x2="20" y1="12" y2="12"/></svg>
                                      <span class="sr-only">Strike</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">
                                      Strike
                                    </span>
                                  </div>

<div class="hs-tooltip inline-block">
                                    <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-ul>
                                      <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"><line x1="8" x2="21" y1="6" y2="6"/><line x1="8" x2="21" y1="12" y2="12"/><line x1="8" x2="21" y1="18" y2="18"/><line x1="3" x2="3.01" y1="6" y2="6"/><line x1="3" x2="3.01" y1="12" y2="12"/><line x1="3" x2="3.01" y1="18" y2="18"/></svg>
                                      <span class="sr-only">Lists</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">
                                      Lists
                                    </span>
                                  </div>

<div class="hs-tooltip inline-block">
                                    <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-blockquote>
                                      <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 6H3"/><path d="M21 12H8"/><path d="M21 18H8"/><path d="M3 12v6"/></svg>
                                      <span class="sr-only">Blockquote</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">
                                      Blockquote
                                    </span>
                                  </div>

<div class="hs-tooltip inline-block">
                                    <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-code>
                                      <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="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
                                      <span class="sr-only">Code</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">
                                      Code
                                    </span>
                                  </div>
                                  
                                </div>
                                
                              </div>
                              
                            </div>

<div class="hs-tooltip [--placement:bottom] inline-block">
                              <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-link>
                                <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="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                              </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">
                                Link
                              </span>
                            </div>
                            
      
                            
                            <div class="hs-tooltip [--placement:bottom] inline-block">
                              <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-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>
                              </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 emoji
                              </span>
                            </div>
                            
      
                            
                            <div class="hs-tooltip [--placement:bottom] inline-block">
                              <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-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="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>
                              </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">
                                Send voice message
                              </span>
                            </div>
                            
        
                            
                            <div class="hs-tooltip [--placement:bottom] inline-block">
                              <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-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>
                              </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 class="ms-auto">
                              
                              <div class="inline-flex items-center -space-x-px">
                                
                                <button type="button" class="py-1.5 px-2.5 inline-flex justify-center items-center gap-x-1.5 font-medium text-sm rounded-s-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus focus:z-10">
                                  Send
                                </button>

<div class="hs-dropdown [--auto-close:inside] [--placement:top-right] relative inline-flex border-s border-line-7/50">
                                  <div class="hs-tooltip [--placement:bottom-right] inline-block">
                                    <button id="hs-pro-in1trsbgwmdid1" type="button" class="hs-tooltip-toggle size-8.5 inline-flex justify-center items-center gap-x-1.5 font-medium text-sm rounded-e-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus focus:z-10">
                                      <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="m18 15-6-6-6 6"/></svg>
                                      <span class="sr-only">More send options</span>
                                    </button>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-60 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                      More send options
                                    </span>
                                  </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown border border-dropdown-line rounded-xl shadow-lg" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-in1trsbgwmdid1">
                                    
                                    <div class="p-1">
                                      <button type="button" class="w-full flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-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="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/></svg>
                                        Send
                                      </button>

<button type="button" class="w-full flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-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 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5"/><path d="M16 2v4"/><path d="M8 2v4"/><path d="M3 10h5"/><path d="M17.5 17.5 16 16.3V14"/><circle cx="16" cy="16" r="6"/></svg>
                                        Schedule send
                                      </button>
                                    </div>
                                    
                                  </div>
                                  
                                </div>
                                
                              </div>
                              
                            </div>
                          </div>
                        </div>
                        
                      </div>
                      
                    </div>

const ids = '#hs-editor-tiptap-1';
                      const editors = ids.split(' ');

editors.forEach((id) => {
                        const editor = new Editor({
                          element: document.querySelector(`${id} [data-hs-editor-field]`),
                          editorProps: {
                            attributes: {
                              class: 'relative min-h-56 p-4'
                            }
                          },
                          extensions: [
                            StarterKit.configure({
                              history: false
                            }),
                            Placeholder.configure({
                              placeholder: 'Add a message...',
                              emptyNodeClass: 'before:text-muted-foreground'
                            }),
                            Paragraph.configure({
                              HTMLAttributes: {
                                class: 'text-sm text-foreground'
                              }
                            }),
                            Bold.configure({
                              HTMLAttributes: {
                                class: 'font-bold'
                              }
                            }),
                            Underline,
                            Link.configure({
                              HTMLAttributes: {
                                class: 'inline-flex items-center gap-x-1 text-primary decoration-2 hover:underline font-medium'
                              }
                            }),
                            BulletList.configure({
                              HTMLAttributes: {
                                class: 'list-disc list-inside text-foreground'
                              }
                            }),
                            OrderedList.configure({
                              HTMLAttributes: {
                                class: 'list-decimal list-inside text-foreground'
                              }
                            }),
                            ListItem.configure({
                              HTMLAttributes: {
                                class: 'marker:text-sm'
                              }
                            }),
                            Blockquote.configure({
                              HTMLAttributes: {
                                class: 'relative border-s-4 ps-4 sm:ps-6 border-line-2 sm:[&>p]:text-lg'
                              }
                            })
                          ]
                        });
                        const actions = [
                          {
                            id: `${id} [data-hs-editor-bold]`,
                            fn: () => editor.chain().focus().toggleBold().run()
                          },
                          {
                            id: `${id} [data-hs-editor-italic]`,
                            fn: () => editor.chain().focus().toggleItalic().run()
                          },
                          {
                            id: `${id} [data-hs-editor-underline]`,
                            fn: () => editor.chain().focus().toggleUnderline().run()
                          },
                          {
                            id: `${id} [data-hs-editor-strike]`,
                            fn: () => editor.chain().focus().toggleStrike().run()
                          },
                          {
                            id: `${id} [data-hs-editor-link]`,
                            fn: () => {
                              const url = window.prompt('URL');
                              editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
                            }
                          },
                          {
                            id: `${id} [data-hs-editor-ol]`,
                            fn: () => editor.chain().focus().toggleOrderedList().run()
                          },
                          {
                            id: `${id} [data-hs-editor-ul]`,
                            fn: () => editor.chain().focus().toggleBulletList().run()
                          },
                          {
                            id: `${id} [data-hs-editor-blockquote]`,
                            fn: () => editor.chain().focus().toggleBlockquote().run()
                          },
                          {
                            id: `${id} [data-hs-editor-code]`,
                            fn: () => editor.chain().focus().toggleCode().run()
                          }
                        ];

actions.forEach(({ id, fn }) => {
                          const action = document.querySelector(id);

if (action === null) return;

action.addEventListener('click', fn);
                        });
                      });
                    </script>

Open related shared inbox template

Expanded Email Thread Card with Full Message Body Pro

Expanded thread card shows sender and recipient metadata, timestamp, preview text, full message body, and thread actions.

<div id="hs-pro-in1tcid1" class="hs-accordion ">
                      <div class="m-0.5 bg-layer rounded-2xl shadow-xs">
                        
                        <div class="relative">
                          <div class="hs-accordion-toggle after:absolute after:inset-0 after:z-1" role="button" aria-expanded="false" aria-controls="hs-pro-in1tcid1-heading"></div>

<div class="py-3 ps-4 pe-14 w-full inline-flex items-center gap-x-2 truncate">
                            <div class="w-full flex gap-x-3.5 truncate">
                              <span class="mt-1 flex shrink-0 justify-center items-center size-8 uppercase bg-surface-3 text-foreground-inverse rounded-full">S</span>
          
                              <div class="grow truncate flex flex-col">
                                
                                <div class=" truncate">
                                  <div class="hs-tooltip [--trigger:click] [--placement:bottom-left] inline-block leading-4">
                                    <span class="hs-tooltip-toggle relative z-7 inline-flex items-center truncate text-sm font-semibold text-foreground cursor-pointer underline-offset-2 hover:underline" tabindex="-1">
                                      Sarah Chen
                                    </span>

<div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible hidden opacity-0 transition-opacity absolute invisible z-8 max-w-64 sm:max-w-xs w-full bg-popover border border-popover-line text-start rounded-xl shadow-md after:absolute after:top-0 after:-inset-s-4 after:w-4 after:h-full" role="tooltip">
                                      <div class="p-4">
                                        <span class="block mb-2 text-sm text-muted-foreground-1">
                                          Contact
                                        </span>

<div class="flex flex-col justify-center items-center gap-y-2">
                                          <span class="flex shrink-0 justify-center items-center size-12 uppercase bg-surface-3 text-foreground-inverse rounded-full">S</span>
                                          <p class="mt-2 font-medium text-foreground">
                                            Sarah Chen
                                          </p>
                                        </div>

<div class="mt-1 text-center">
                                          <p class="text-sm text-foreground">
                                            <a class="inline-flex items-center gap-x-1.5 text-[13px] text-primary underline-offset-4 hover:underline focus:outline-hidden focus:underline" href="#">schen@company.com</a>
                                          </p>
                                        </div>
        
                                        
                                        <div class="pt-4 mt-4 flex justify-between items-center border-t border-line-2">
                                          <a class="inline-flex items-center gap-x-1.5 text-xs text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                            <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"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" x2="4" y1="22" y2="15"/></svg>
                                            Flag
                                          </a>

<div class="hs-accordion-force-active hs-accordion-active:block hidden leading-4 truncate">
                                  <div class="hs-tooltip [--trigger:click] [--placement:bottom-left] inline-block leading-4">
                                    <span class="truncate text-sm text-foreground">To:</span>
                                    <span class="hs-tooltip-toggle relative z-7 inline-flex items-center truncate text-sm text-muted-foreground-1 cursor-pointer underline-offset-2 hover:underline" tabindex="-1">
                                      Lewis Clarke
                                    </span>

<div class="flex flex-col justify-center items-center gap-y-2">
                                          <img class="shrink-0 size-12 rounded-full" src="https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                          <p class="mt-2 font-medium text-foreground">
                                            Lewis Clarke
                                          </p>
                                        </div>

<div class="mt-1 text-center">
                                          <p class="text-sm text-foreground">
                                            <a class="inline-flex items-center gap-x-1.5 text-[13px] text-primary underline-offset-4 hover:underline focus:outline-hidden focus:underline" href="#">lewis@company.com</a>
                                          </p>
                                        </div>
        
                                        
                                        <div class="pt-4 mt-4 flex justify-between items-center border-t border-line-2">
                                          <a class="inline-flex items-center gap-x-1.5 text-xs text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                            <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"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" x2="4" y1="22" y2="15"/></svg>
                                            Flag
                                          </a>

<button type="button" class="py-1.5 px-3 inline-flex items-center gap-x-1.5 text-sm rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                                            <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"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" x2="19" y1="8" y2="14"/><line x1="22" x2="16" y1="11" y2="11"/></svg>
                                            Add to contacts
                                          </button>
                                        </div>
                                        
                                      </div>
                                    </div>
                                    
                                  </div>
                                </div>
                                
            
                                <div class="hs-accordion-force-active hs-accordion-active:block sm:hs-accordion-active:hidden hidden leading-4 truncate">
                                  <span class="truncate text-sm text-foreground">Date:</span>
                                  <span class="truncate text-sm text-muted-foreground-1">October 3, 2024 10:15 AM</span>
                                </div>
            
                                <div class="hs-accordion-force-active hs-accordion-active:hidden leading-4 truncate">
                                  <p class="truncate text-sm text-muted-foreground-1">Hi team, I've reviewed the latest sprint progress, and I think we need to discuss some adjustments to our project timeline. We're running into some unexpected challenges with the API integration, which might impact our delivery date.</p>
                                </div>
                              </div>

<div class="self-center">
                                <span class="hs-accordion-force-active hs-accordion-active:hidden text-xs inline-block text-muted-foreground-1">Oct 3</span>
                                <span class="hs-accordion-force-active sm:hs-accordion-active:inline-block hidden text-xs text-muted-foreground-1">October 3, 2024 10:15 AM</span>
                              </div>
                            </div>
                          </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown-1 border border-dropdown-line rounded-xl shadow-lg" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-in1tctmdid1">
                                <div class="max-h-[42dvh] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                                  <div class="p-1 space-y-0.5 border-b border-dropdown-divider last:border-b-0">
                                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-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>
                                      Reply
                                    </button>
                                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-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="7 17 2 12 7 7"/><polyline points="12 17 7 12 12 7"/><path d="M22 18v-2a4 4 0 0 0-4-4H7"/></svg>
                                      Reply all
                                    </button>
                                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-chhsn">
                                      <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="15 17 20 12 15 7"/><path d="M4 18v-2a4 4 0 0 1 4-4h12"/></svg>
                                      Forward
                                    </button>
                                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-chhsn">
                                      <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="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/></svg>
                                      Resend
                                    </button>
                                  </div>
                                  <div class="p-1 space-y-0.5 border-b border-dropdown-divider last:border-b-0">
                                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-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"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
                                      Mark as unread
                                    </button>
                                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-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.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z"/><path d="m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10"/></svg>
                                      Mark as read
                                    </button>
                                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-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"><rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/></svg>
                                      Archive
                                    </button>
                                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-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>
                                      Delete
                                    </button>
                                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-chhsn">
                                      <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="M12 16h.01"/><path d="M12 8v4"/><path d="M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z"/></svg>
                                      Report spam
                                    </button>
                                  </div>
                                  <div class="p-1 space-y-0.5 border-b border-dropdown-divider last:border-b-0">
                                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-chhtgm">
                                      <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="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><path d="M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6"/><rect x="6" y="14" width="12" height="8" rx="1"/></svg>
                                      Print <span class="py-0.5 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium bg-primary-100 text-primary-800 rounded-full dark:bg-primary-500/10 dark:text-primary-500">New</span>
                                    </button>
                                  </div>
                                  <div class="p-1 space-y-0.5 border-b border-dropdown-divider last:border-b-0">
                                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-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="M20 7h-3a2 2 0 0 1-2-2V2"/><path d="M9 18a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h7l4 4v10a2 2 0 0 1-2 2Z"/><path d="M3 7.6v12.8A1.6 1.6 0 0 0 4.6 22h9.8"/></svg>
                                      Link to conversation
                                    </button>
                                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-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"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                                      Copy conversation ID
                                    </button>
                                    <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-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="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                                      Copy conversation link
                                    </button>
                                  </div>
                                </div>
                              </div>
                              
                            </div>

</div>
                        </div>

<div id="hs-pro-in1tcid1-heading" class="hs-accordion-content hidden w-full overflow-hidden" role="region" aria-labelledby="hs-pro-in1tcid1">
                          <div class="p-4 border-t border-line-2">
                            <div class="text-sm text-foreground">Hi team,<br><br>I've reviewed the latest sprint progress, and I think we need to discuss some adjustments to our project timeline. We're running into some unexpected challenges with the API integration, which might impact our delivery date.<br><br>Could we schedule a meeting to go over the following points?<br><ol class="list-decimal list-inside ps-3"><li>Current blockers in the API integration</li><li>Potential solutions and workarounds</li><li>Revised timeline estimates</li></ol><br>Thanks,<br>Sarah Chen<br>Project Manager</div>
                          </div>
                        </div>
                        
                      </div>
                    </div>

Open related shared inbox template