Tailwind CSS Content Editor Forms Blocks

All Blocks
Application UI
Forms
Content Editor Forms

Content Editor Forms

CMS editor forms for drafting posts, managing publish actions, and composing long-form content workflows.

CMS Post Editor Pro

Split editor workspace combines a publish toolbar, rich text editor, preview controls, and supporting media panels.

Create a responsive UI block named "CMS Post Editor" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/content-editor-forms/#cms-post-editor. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.

Source metadata:
- Catalog family: forms/content-editor-forms
- Block ID: cms-post-editor
- Source description: Split editor workspace combines a publish toolbar, rich text editor, preview controls, and supporting media panels.
- Preview iframe: https://preline.co/blocks/forms/content-editor-forms/iframes/pro/cms-post-editor.html (repo path: blocks/forms/content-editor-forms/iframes/pro/cms-post-editor.html)
- Source markup reference:
  - partials/pro/cms-admin/pages/create-post.html
  - partials/pro/css/third-party/tiptap.html
  - partials/pro/cms-admin/navbars/tbb-content-editor.html
  - partials/pro/cms-admin/forms/content-editor.html
  - partials/pro/cms-admin/forms/banner-image-upload-placeholder.html
  - scripts/plugins/dropzone.html

Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Source content inventory (from the source markup):
  - Two-pane workspace: a fixed-width left editor column (`lg:w-120`, full height, `border-e`) and a flexible right preview canvas that scrolls independently; below `lg` the two panes stack with the editor first and the divider becomes a bottom border.
  - Left pane subheader shows only one metadata pair - `Created:` followed by `18/07/2025, 11:59 AM` in 13px text. The "Modified:" pair exists in the source partial but is switched OFF in this block, so do not render it.
  - A 3-tab segmented control sits above the editor: `Content`, `Settings`, `SEO`, in that order, with `Content` active on first load (active tab gets a raised light surface and shadow inside a muted `rounded-lg` pill track). Tabs are Preline HSTabs with `role="tabpanel"` panels; the `Settings` and `SEO` panels start `hidden`, and the `SEO` panel contains only a skeleton placeholder.
  - Content panel fields in order: a `Post title` auto-growing textarea (`rows="1"`, `data-hs-textarea-auto-height` with a 42px default height, empty on load); a `Banner image` upload zone reading `Drop your image here or` plus a primary `browse` link and the hint `Image size should be 1200x630px`; then a `Content` label above the Tiptap editor. The upload zone starts EMPTY (no already-uploaded file card).
  - The Tiptap toolbar has exactly 9 `size-8` icon buttons in this order: bold, italic, underline, strikethrough, link, ordered list, unordered list, blockquote, code - each a `size-4` Lucide-style outline icon wired through `data-hs-editor-*` attributes, above a `data-hs-editor-field` area that is empty on load.
  - Right pane sticky toolbar: a left-aligned eye-icon text button labeled `Preview`, and on the right `Status:` `Draft` next to a small primary `Publish` action. Under it a muted `h1` `Post title` at `text-2xl md:text-4xl font-semibold`, then the banner placeholder: 3 overlapping `size-24 rounded-xl` Unsplash thumbnails (outer two rotated -16deg and +16deg and pushed down) above an `h2` reading `Upload your banner image`, inside a `h-64 md:h-96 rounded-xl` muted panel.
  - Real behavior needs Preline HSTabs, HSFileUpload (Dropzone.js), the textarea auto-height plugin, and Tiptap plus its stylesheet - do not substitute a plain textarea for the rich editor or static divs for the tabs.

Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.

Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.

Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.

Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.

<div class="bg-layer flex-1 flex flex-col lg:overflow-hidden lg:overflow-y-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">
                      <div class="flex-1 flex flex-col lg:flex-row min-h-0">
                        <div class="shrink-0">
                          <div class="lg:w-120 h-full flex flex-col border-b lg:border-b-0 lg:border-e border-line-2">
                            
                            <div class="p-4 flex flex-wrap justify-between items-center gap-2 border-b border-line-2">
                              
                              <div class="flex items-center gap-1">
                                <span class="inline-flex items-center gap-x-1 text-[13px] text-muted-foreground-1">
                                  Created:
                                </span>
                                <span class="text-[13px] text-foreground">
                                  18/07/2025, 11:59 AM
                                </span>
                              </div>
                              
                            </div>

<div class="p-4">
                              
                              <nav  class="inline-flex gap-1 p-0.5 w-full relative bg-surface rounded-lg" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
                                <button type="button" class="hs-tab-active:bg-layer hs-tab-active:shadow-sm py-2 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm text-layer-foreground rounded-md hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden active" id="hs-pro-tabs-bb-item-content" aria-selected="true" data-hs-tab="#hs-pro-tabs-bb-content" aria-controls="hs-pro-tabs-bb-content" role="tab" >
                                  Content
                                </button>
                                <button type="button" class="hs-tab-active:bg-layer hs-tab-active:shadow-sm py-2 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm text-layer-foreground rounded-md hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-bb-item-settings" aria-selected="false" data-hs-tab="#hs-pro-tabs-bb-settings" aria-controls="hs-pro-tabs-bb-settings" role="tab" >
                                  Settings
                                </button>
                                <button type="button" class="hs-tab-active:bg-layer hs-tab-active:shadow-sm py-2 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm text-layer-foreground rounded-md hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-bb-item-seo" aria-selected="false" data-hs-tab="#hs-pro-tabs-bb-seo" aria-controls="hs-pro-tabs-bb-seo" role="tab" >
                                  SEO
                                </button>
                              </nav>
                              
                            </div>

<div class="p-4 pb-10 flex-1 lg: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 id="hs-pro-tabs-bb-content" role="tabpanel" aria-labelledby="hs-pro-tabs-bb-item-content">
                                
                                <form>
                                  <div class="flex flex-col gap-y-5">
                                    
                                    <div class="relative">
                                      <label for="hs-pro-apdptt" class="block mb-2 font-medium text-sm text-foreground">
                                        Post title
                                      </label>

<div>
                                      <label class="block mb-2 font-medium text-sm text-foreground">
                                        Banner image
                                      </label>
  
                                      <div data-hs-file-upload='{
                                        "url": "/upload",
                                        "extensions": {
                                          "default": {
                                            "class": "shrink-0 size-5"
                                          },
                                          "xls": {
                                            "class": "shrink-0 size-5"
                                          },
                                          "zip": {
                                            "class": "shrink-0 size-5"
                                          },
                                          "csv": {
                                            "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4\"/><path d=\"M14 2v4a2 2 0 0 0 2 2h4\"/><path d=\"m5 12-3 3 3 3\"/><path d=\"m9 18 3-3-3-3\"/></svg>",
                                            "class": "shrink-0 size-5"
                                          }
                                        }
                                      }'>
                                        <template data-hs-file-upload-preview>
                                          <div class="p-3 bg-layer border border-solid border-card-line rounded-lg">
                                            <div class="mb-1 flex justify-between items-center">
                                              <div class="flex items-center gap-x-3">
                                                <span class="size-10 flex justify-center items-center border border-card-line text-muted-foreground-1 rounded-lg" data-hs-file-upload-file-icon>
                                                  <img class="rounded-lg hidden" src="data:," alt="" data-dz-thumbnail>
                                                </span>
                                                <div>
                                                  <p class="text-sm font-medium text-foreground">
                                                    <span class="truncate inline-block max-w-75 align-bottom" data-hs-file-upload-file-name></span>.<span data-hs-file-upload-file-ext></span>
                                                  </p>
                                                  <p class="text-xs text-muted-foreground-1" data-hs-file-upload-file-size></p>
                                                </div>
                                              </div>
                                              <div class="flex items-center gap-x-2">
                                                <button type="button" class="text-muted-foreground-1 hover:text-foreground focus:outline-hidden focus:text-foreground" data-hs-file-upload-remove>
                                                  <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="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path><line x1="10" x2="10" y1="11" y2="17"></line><line x1="14" x2="14" y1="11" y2="17"></line></svg>
                                                </button>
                                              </div>
                                            </div>
  
                                            <div class="flex items-center gap-x-3 whitespace-nowrap">
                                              <div class="flex w-full h-2 bg-secondary rounded-full overflow-hidden" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" data-hs-file-upload-progress-bar>
                                                <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition-all duration-500 hs-file-upload-complete:bg-green-500" style="width: 0" data-hs-file-upload-progress-bar-pane></div>
                                              </div>
                                              <div class="w-10 text-end">
                                                <span class="text-sm text-foreground">
                                                  <span data-hs-file-upload-progress-bar-value>0</span>%
                                                </span>
                                              </div>
                                            </div>
                                          </div>
                                        </template>
  
                                        <div class="cursor-pointer p-4 flex bg-card border border-card-line rounded-lg" data-hs-file-upload-trigger>
                                          <div class="flex items-center gap-4">
                                            <svg class="shrink-0 size-10 text-foreground" width="73" height="47" viewBox="0 0 73 47" fill="none" xmlns="http://www.w3.org/2000/svg">
                                              <path d="M54.519 40.4773V6.76876C54.519 3.92686 52.2121 1.62305 49.3664 1.62305H22.7076C19.8619 1.62305 17.555 3.92686 17.555 6.76876V40.4773M54.519 40.4773C54.519 43.3192 52.2121 45.6231 49.3664 45.6231H22.7076C19.8619 45.6231 17.555 43.3192 17.555 40.4773M54.519 40.4773L54.5189 34.6563L48.6564 28.3566L43.2612 34.6373C42.4421 35.5908 40.9662 35.5955 40.141 34.6472L30.3406 23.3844L17.555 36.9154V40.4773M6.20483 9.59424L17.707 7.6798V42.5188L12.6457 43.5828C9.25658 44.2954 5.94238 42.0892 5.29702 38.691L1.14643 16.8357C0.500082 13.4322 2.78322 10.1637 6.20483 9.59424ZM65.8691 9.59424L54.3669 7.6798V42.5188L59.4282 43.5828C62.8173 44.2954 66.1316 42.0892 66.7769 38.691L70.9274 16.8357C71.5738 13.4322 69.2907 10.1637 65.8691 9.59424ZM45.0584 15.3561C45.0584 17.7228 43.1372 19.6413 40.7673 19.6413C38.3974 19.6413 36.4762 17.7228 36.4762 15.3561C36.4762 12.9894 38.3974 11.0708 40.7673 11.0708C43.1372 11.0708 45.0584 12.9894 45.0584 15.3561Z" stroke="currentColor" stroke-width="2"/>
                                            </svg>
  
                                            <div class="grow">
                                              <div class="inline-flex flex-wrap gap-1 text-sm/6 text-foreground">
                                                Drop your image here or
                                                <span class="text-primary hover:text-primary-hover rounded-lg decoration-2 hover:underline focus-within:outline-hidden focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2">browse</span>
                                              </div>
          
                                              <p class="text-xs text-muted-foreground-1">
                                                Image size should be 1200x630px
                                              </p>
                                            </div>
                                          </div>
                                        </div>
  
                                        <div class="mt-4 space-y-2 empty:mt-0" data-hs-file-upload-previews></div>
                                      </div>
                                    </div>

<div>
                                      <label class="block mb-2 font-medium text-sm text-foreground">
                                        Content
                                      </label>

<div id="hs-editor-tiptap">
                                        <div class="p-1 bg-layer border border-layer-line rounded-lg">
                                          <div class="flex items-center gap-x-0.5">
                                            <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" type="button" data-hs-editor-bold>
                                              <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="M14 12a4 4 0 0 0 0-8H6v8"/><path d="M15 20a4 4 0 0 0 0-8H6v8Z"/></svg>
                                            </button>
                                            <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" type="button" data-hs-editor-italic>
                                              <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"><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>
                                            </button>
                                            <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" type="button" data-hs-editor-underline>
                                              <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="M6 4v6a6 6 0 0 0 12 0V4"/><line x1="4" x2="20" y1="20" y2="20"/></svg>
                                            </button>
                                            <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" type="button" data-hs-editor-strike>
                                              <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 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>
                                            </button>
                                            <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" type="button" data-hs-editor-link>
                                              <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="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>
                                            <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" type="button" data-hs-editor-ol>
                                              <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"><line x1="10" x2="21" y1="6" y2="6"/><line x1="10" x2="21" y1="12" y2="12"/><line x1="10" x2="21" y1="18" y2="18"/><path d="M4 6h1v4"/><path d="M4 10h2"/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"/></svg>
                                            </button>
                                            <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" type="button" data-hs-editor-ul>
                                              <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"><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>
                                            </button>
                                            <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" type="button" data-hs-editor-blockquote>
                                              <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="M17 6H3"/><path d="M21 12H8"/><path d="M21 18H8"/><path d="M3 12v6"/></svg>
                                            </button>
                                            <button class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" type="button" data-hs-editor-code>
                                              <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="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
                                            </button>
                                          </div>
                                        </div>

<div id="hs-pro-tabs-bb-settings" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-bb-item-settings">
                                
                                <div class="flex flex-col gap-y-5">
                                  
                                  <div>
                                    <label for="hs-pro-apsfurl" class="block mb-2 font-medium text-sm text-foreground">
                                      URL
                                    </label>
                                    <input id="hs-pro-apsfurl" type="text" class="py-2.5 px-3 block w-full bg-transparent border-layer-line text-foreground placeholder:text-muted-foreground-1 rounded-lg sm:text-sm leading-5 disabled:opacity-50 disabled:pointer-events-none focus:border-primary-focus focus:ring-primary" >
                                  </div>

<div>
                                    <label class="block mb-2 font-medium text-sm text-foreground">
                                      Publish date
                                    </label>
    
                                    
                                    <div class="grid grid-cols-2 gap-2">
                                    
                                    <div class="hs-dropdown [--strategy:absolute] [--auto-close:inside] relative inline-flex w-full">
                                      <button id="hs-pro-apsfmd1" type="button" class="py-2 sm:py-2.5 px-3 group inline-flex items-center gap-x-1 w-full text-start sm:text-sm bg-transparent border border-layer-line text-foreground ring-1 ring-transparent rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:ring-primary" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                        Thu, Jan 2024
                                        <svg class="shrink-0 size-3.5 ms-auto text-muted-foreground-1" 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="M8 2v4"/><path d="M16 2v4"/><path d="M21 17V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11Z"/><path d="M3 10h18"/><path d="M15 22v-4a2 2 0 0 1 2-2h4"/></svg>
                                      </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-56 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-apsfmd1">
                                        
                                        <div class="p-2 grid gap-y-0.5">
                                          <div class="w-[207px] ">
                                            
                                            <div class="flex justify-between items-center gap-1 mb-1">
                                              <span class="ps-1.5 block text-xs font-medium text-muted-foreground-1">January 2024</span>

<div class="flex mb-1.5">
                                              <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                Mo
                                              </span>
                                              <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                Tu
                                              </span>
                                              <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                We
                                              </span>
                                              <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                Th
                                              </span>
                                              <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                Fr
                                              </span>
                                              <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                Sa
                                              </span>
                                              <span class="m-px w-7 block text-center text-[11px] text-muted-foreground-1">
                                                Su
                                              </span>
                                            </div>

<div class="flex">
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border-[1.5px] border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  1
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border-[1.5px] border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  2
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border-[1.5px] border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  3
                                                  <span class="absolute bottom-0.5 inset-s-1/2 size-1 bg-primary rounded-full -translate-x-1/2"></span>
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border-[1.5px] border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  4
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border-[1.5px] border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  5
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border-[1.5px] border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  6
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border-[1.5px] border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  7
                                                </button>
                                              </div>
                                            </div>

<div class="flex">
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border-[1.5px] border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  8
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border-[1.5px] border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  9
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border-[1.5px] border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  10
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border-[1.5px] border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  11
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center bg-primary border border-primary-line text-xs font-medium text-foreground-inverse hover:border-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus">
                                                  12
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border-[1.5px] border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  13
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border-[1.5px] border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  14
                                                </button>
                                              </div>
                                            </div>

<div class="flex">
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border-[1.5px] border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  15
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border-[1.5px] border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  16
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border-[1.5px] border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  17
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border-[1.5px] border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  18
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border-[1.5px] border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  19
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border-[1.5px] border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  20
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border-[1.5px] border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  21
                                                </button>
                                              </div>
                                            </div>

<div class="flex">
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border-[1.5px] border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  22
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border-[1.5px] border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  23
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border-[1.5px] border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  24
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border-[1.5px] border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  25
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border-[1.5px] border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  26
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border-[1.5px] border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  27
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border-[1.5px] border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  28
                                                </button>
                                              </div>
                                            </div>

<div class="flex">
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border-[1.5px] border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  29
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border-[1.5px] border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  30
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center border-[1.5px] border-transparent text-xs text-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                  31
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                                  1
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                                  2
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                                  3
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                                  4
                                                </button>
                                              </div>
                                            </div>

<div class="flex">
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                                  5
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                                  6
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                                  7
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                                  8
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                                  9
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                                  10
                                                </button>
                                              </div>
                                              <div>
                                                <button type="button" class="m-px relative size-7 flex justify-center items-center text-xs text-muted-foreground rounded-full hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                                  11
                                                </button>
                                              </div>
                                            </div>
                                            
                                          </div>
                                        </div>
                                        
                                      </div>
                                      
                                    </div>
                                    
      
                                      
                                      <div class="relative group">
                                        <select data-hs-select='{
                                            "placeholder": "Start time",
                                            "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 sm:py-2.5 ps-3 pe-7 w-full flex gap-x-2 text-nowrap text-foreground bg-transparent border border-layer-line ring-1 ring-transparent rounded-lg text-start sm:text-sm focus:outline-hidden focus:border-primary-focus focus:ring-primary",
                                            "dropdownClasses": "mt-2 z-50 w-full max-h-60 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                            "optionClasses": "hs-selected:bg-select-item-active py-2 px-3 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                            "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-muted-foreground-1\" xmlns=\"http:.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=\"20 6 9 17 4 12\"/></svg></span></div>",
                                            "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" 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=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></div>"
                                          }' class="hidden">
                                          <option value="">Choose</option>
                                          <option>12:00AM</option>
                                          <option>12:15AM</option>
                                          <option>12:30AM</option>
                                          <option>12:45AM</option>
                                          <option>1:00AM</option>
                                          <option>1:15AM</option>
                                          <option>1:30AM</option>
                                          <option>1:45AM</option>
                                          <option>2:00AM</option>
                                          <option>2:15AM</option>
                                          <option>2:30AM</option>
                                          <option>2:45AM</option>
                                          <option>3:00AM</option>
                                          <option>3:15AM</option>
                                          <option>3:30AM</option>
                                          <option>3:45AM</option>
                                          <option>4:00AM</option>
                                          <option>4:15AM</option>
                                          <option>4:30AM</option>
                                          <option>4:45AM</option>
                                          <option>5:00AM</option>
                                          <option>5:15AM</option>
                                          <option>5:30AM</option>
                                          <option>5:45AM</option>
                                          <option>6:00AM</option>
                                          <option>6:15AM</option>
                                          <option>6:30AM</option>
                                          <option>6:45AM</option>
                                          <option>7:00AM</option>
                                          <option>7:15AM</option>
                                          <option>7:30AM</option>
                                          <option>7:45AM</option>
                                          <option>8:00AM</option>
                                          <option>8:15AM</option>
                                          <option>8:30AM</option>
                                          <option>8:45AM</option>
                                          <option>9:00AM</option>
                                          <option>9:15AM</option>
                                          <option>9:30AM</option>
                                          <option>9:45AM</option>
                                          <option selected>10:00AM</option>
                                          <option>10:15AM</option>
                                          <option>10:30AM</option>
                                          <option>10:45AM</option>
                                          <option>11:00AM</option>
                                          <option>11:15AM</option>
                                          <option>11:30AM</option>
                                          <option>11:45AM</option>
                                          <option>12:00PM</option>
                                          <option>12:15PM</option>
                                          <option>12:30PM</option>
                                          <option>12:45PM</option>
                                          <option>1:00PM</option>
                                          <option>1:15PM</option>
                                          <option>1:30PM</option>
                                          <option>1:45PM</option>
                                          <option>2:00PM</option>
                                          <option>2:15PM</option>
                                          <option>2:30PM</option>
                                          <option>2:45PM</option>
                                          <option>3:00PM</option>
                                          <option>3:15PM</option>
                                          <option>3:30PM</option>
                                          <option>3:45PM</option>
                                          <option>4:00PM</option>
                                          <option>4:15PM</option>
                                          <option>4:30PM</option>
                                          <option>4:45PM</option>
                                          <option>5:00PM</option>
                                          <option>5:15PM</option>
                                          <option>5:30PM</option>
                                          <option>5:45PM</option>
                                          <option>6:00PM</option>
                                          <option>6:15PM</option>
                                          <option>6:30PM</option>
                                          <option>6:45PM</option>
                                          <option>7:00PM</option>
                                          <option>7:15PM</option>
                                          <option>7:30PM</option>
                                          <option>7:45PM</option>
                                          <option>8:00PM</option>
                                          <option>8:15PM</option>
                                          <option>8:30PM</option>
                                          <option>8:45PM</option>
                                          <option>9:00PM</option>
                                          <option>9:15PM</option>
                                          <option>9:30PM</option>
                                          <option>9:45PM</option>
                                          <option>10:00PM</option>
                                          <option>10:15PM</option>
                                          <option>10:30PM</option>
                                          <option>10:45PM</option>
                                          <option>11:00PM</option>
                                          <option>11:15PM</option>
                                          <option>11:30PM</option>
                                          <option>11:45PM</option>
                                        </select>
                                      </div>
                                      
                                    </div>
                                    
                                  </div>

<div>
                                    <label for="hs-pro-apsftz" class="block mb-2 font-medium text-sm text-foreground">
                                      Time zone
                                    </label>

<div>
                                    <label class="block mb-2 font-medium text-sm text-foreground">
                                      Tags
                                    </label>
    
                                    
                                    <div class="relative w-full">
                                      <select id="hs-pro-select-tags" multiple data-hs-select='{
                                          "placeholder": "Select option...",
                                          "wrapperClasses": "hs-select-active:ring-1 hs-select-active:ring-primary hs-select-active:border-primary pe-9 rounded-lg flex items-center flex-wrap text-nowrap w-full text-start text-sm bg-transparent border border-layer-line text-foreground shadow-2xs",
                                          "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                          "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1.5 ps-2 pe-7 inline-flex shrink-0 justify-center items-center gap-x-1.5 text-[13px] text-foreground rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus before:absolute before:inset-0 before:z-1",
                                          "dropdownClasses": "mt-2 z-50 w-full max-h-72 p-1 space-y-0.5 rounded-lg overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                          "optionClasses": "hs-selected:bg-select-item-active py-1.5 px-2 w-full text-[13px] text-select-item-foreground rounded-lg cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                                          "mode": "tags",
                                          "tagsItemTemplate": "<div class=\"flex flex-nowrap items-center relative z-1 border border-dashed border-line-3 rounded-sm py-0.5 ps-2 pe-1 mx-1 my-0.5\"><div class=\"whitespace-nowrap\" data-title></div><div class=\"inline-flex shrink-0 justify-center items-center size-4.5 ms-2 rounded-sm text-foreground bg-surface 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>",
                                          "tagsInputClasses": "py-2 sm:py-[9px] ps-3 pe-7 grow order-1 sm:text-sm cursor-pointer border-transparent bg-transparent rounded-lg focus:ring-transparent focus-visible:outline-hidden placeholder:text-muted-foreground",
                                          "optionTemplate": "<div class=\"flex items-center\"><div class=\"size-8 me-2\" data-icon></div><div><div class=\"text-sm text-foreground\" data-title></div><div class=\"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>",
                                          "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" 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></div>"
                                        }' class="hidden">
                                        <option value="">Choose</option>
                                        <option value="article">Article</option>
                                        <option value="tutorial">Tutorial</option>
                                        <option value="case-study">Case Study</option>
                                        <option value="release-note">Release Note</option>
                                        <option value="update">Update</option>
                                        <option value="news">News</option>
                                      </select>
                                    </div>
                                    
                                  </div>

<div>
                                    <label class="block mb-2 font-medium text-sm text-foreground">
                                      Post access
                                    </label>
    
                                    
                                    <div class="relative group">
                                      <select data-hs-select='{
                                          "placeholder": "Start time",
                                          "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                          "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 sm:py-2.5 ps-3 pe-7 w-full flex gap-x-2 text-nowrap text-foreground bg-transparent border border-layer-line ring-1 ring-transparent rounded-lg text-start sm:text-sm focus:outline-hidden focus:border-primary-focus focus:ring-primary",
                                          "dropdownClasses": "mt-2 z-50 w-full max-h-60 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                          "optionClasses": "hs-selected:bg-select-item-active py-2 px-3 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                          "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-muted-foreground-1\" xmlns=\"http:.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=\"20 6 9 17 4 12\"/></svg></span></div>",
                                          "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" 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></div>"
                                        }' class="hidden">
                                        <option value="">Choose</option>
                                        <option value="public" selected>Public</option>
                                        <option value="private">Private</option>
                                        <option value="protected">Protected</option>
                                        <option value="draft">Draft</option>
                                        <option value="scheduled">Scheduled</option>
                                        <option value="archived">Archived</option>
                                        <option value="trashed">Trashed</option>
                                      </select>
                                    </div>
                                    
                                  </div>

<div>
                                    
                                    <label for="hs-pro-apsfex" class="block mb-2 font-medium text-sm text-foreground">
                                      Excerpt
                                    </label>

<div id="hs-pro-tabs-bb-seo" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-bb-item-seo">
                                
                                <ul class="divide-y divide-line-2">
                                  
                                  <li class="py-6 first:pt-2 last:pb-2">
                                    <div class="animate-pulse">
                                      <div class="flex items-center gap-x-2">
                                        <div class="shrink-0">
                                          <span class="shrink-0 size-7 block bg-surface-1 rounded-md"></span>
                                        </div>

<li class="py-6 first:pt-2 last:pb-2">
                                    <div class="animate-pulse">
                                      <div class="flex items-center gap-x-2">
                                        <div class="shrink-0">
                                          <span class="shrink-0 size-7 block bg-surface-1 rounded-md"></span>
                                        </div>

<ul class="mt-3 space-y-3">
                                        <li class="h-4 bg-surface-1 rounded-md" style="width: 25%;"></li>
                                        <li class="w-full h-4 bg-surface-1 rounded-md"></li>
                                        <li class="w-full h-4 bg-surface-1 rounded-md"></li>
                                      </ul>
                                    </div>
                                  </li>
                                  
                                </ul>
                                
                              </div>
                              
                            </div>
                          </div>
                        </div>
                        
    
                        <div class="flex-1 min-w-0 flex flex-col lg:overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                          <div class="p-4 lg:p-10 pt-0 lg:pt-0">
                            
                            <div class="sticky top-0 py-4 bg-layer flex flex-wrap justify-between items-center gap-y-1 gap-x-3">
                              <button type="button" class="inline-flex items-center gap-x-1.5 text-[13px] text-foreground hover:underline underline-offset-2 hover:decoration-2 focus:outline-hidden focus:underline focus:decoration-2 disabled:opacity-50 disabled:pointer-events-none">
                                <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="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
                                Preview
                              </button>
      
                              <div class="flex items-center gap-x-5">
                                
                                <div class="flex items-center gap-1">
                                  <span class="inline-flex items-center gap-x-1 text-[13px] text-muted-foreground-1">
                                    Status:
                                  </span>
                                  <span class="text-[13px] text-foreground">
                                    Draft
                                  </span>
                                </div>

<a class="flex items-center gap-x-1.5 py-1.5 px-2.5 text-[13px] bg-primary border border-primary-line text-primary-foreground whitespace-nowrap rounded-lg hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="published.html">
                                  Publish
                                </a>
                              </div>
                            </div>

<h1 class="font-semibold text-2xl md:text-4xl text-muted-foreground">
                              Post title
                            </h1>
                            <br>
                            
                            <div class="flex flex-col justify-center items-center gap-y-10 w-full h-64 md:h-96 bg-background-2 rounded-xl">
                              <div class="flex justify-center items-center -space-x-8">
                                <div class="relative z-2 size-24 shrink-0 -rotate-16 mt-10 bg-surface-3 ring-3 ring-layer rounded-xl shadow-lg">
                                  <img class="absolute inset-0 size-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1751013781844-fa6a78089e49?q=80&w=480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Placeholder Image">
                                </div>
                                <div class="relative z-1 size-24 shrink-0 bg-surface-3 ring-3 ring-layer rounded-xl shadow-lg">
                                  <img class="absolute inset-0 size-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1750994700092-19f94d4da5ff?q=80&w=480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Placeholder Image">
                                </div>
                                <div class="relative size-24 shrink-0 rotate-16 mt-10 bg-surface-3 ring-3 ring-layer rounded-xl shadow-lg">
                                  <img class="absolute inset-0 size-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1751442188780-c4ba25403392?q=80&w=480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Placeholder Image">
                                </div>
                              </div>
                              <h2 class="text-xl text-muted-foreground-1">
                                Upload your banner image
                              </h2>
                            </div>

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

const ids = '#hs-editor-tiptap';
  const ctn = `@@ctn`;
  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-40 mt-5'
        }
      },
      content: ctn.includes('@ctn') && ctn.length === 5 ? '' : ctn,
      extensions: [
        StarterKit.configure({
          history: false
        }),
        Placeholder.configure({
          placeholder: 'Begin writing your post..',
          emptyNodeClass: 'before:text-muted-foreground-1'
        }),
        Heading.configure({
          HTMLAttributes: {
            class: 'text-xl text-foreground'
          }
        }),
        Paragraph.configure({
          HTMLAttributes: {
            class: 'text-sm text-foreground'
          }
        }),
        Bold.configure({
          HTMLAttributes: {
            class: 'font-semibold'
          }
        }),
        Underline,
        Link.configure({
          HTMLAttributes: {
            class: 'inline-flex items-center gap-x-1 text-green-600 decoration-2 hover:underline font-medium dark:text-white'
          }
        }),
        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 sm:[&>p]:text-lg text-foreground'
          }
        })
      ]
    });
    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 create post template