Tailwind CSS AI Interface Pages

AI Interface Pages

AI interface pages for assistant products with centered chat screens, sidebar chat layouts, and prompt-first welcome flows.

Centered AI Conversation Page with Carded Chat Bubbles Free

Centered AI conversation page pairs a hero title with stacked card-style assistant and user chat bubbles plus follow-up action rows.

Create a responsive UI block named "Centered AI Conversation Page with Carded Chat Bubbles" 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/application-pages/ai-interface-pages/#centered-ai-conversation-page-with-carded-chat-bubbles. 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: application-pages/ai-interface-pages
- Block ID: centered-ai-conversation-page-with-carded-chat-bubbles
- Source description: Centered AI conversation page pairs a hero title with stacked card-style assistant and user chat bubbles plus follow-up action rows.
- Preview iframe: https://preline.co/blocks/application-pages/ai-interface-pages/iframes/free/centered-ai-conversation-page-with-carded-chat-bubbles.html (repo path: blocks/application-pages/ai-interface-pages/iframes/free/centered-ai-conversation-page-with-carded-chat-bubbles.html)
- Source markup reference:
  - partials/blocks/sources/pages/ai-classic.html
  - partials/docs/components/buttons-rate.html
  - partials/docs/components/list-group-example-download.html
  - partials/blocks/sources/pages/ti-chat-format.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 source layout width, wrapper hierarchy, component geometry, responsive order, interaction contents, and exact visible copy.
- Do not replace custom source details with default badges, buttons, cards, placeholders, or unrelated components.
- Source content inventory (from the source markup):
  - Centered header: Preline logo link, `h1` `Welcome to Preline AI`, subtitle `Your AI-powered copilot for the web`; the conversation is a `ul` of 13 `li` rows, each re-applying a `max-w-4xl px-4 sm:px-6 lg:px-8 mx-auto` container.
  - User turns in order read `what's preline ui?`, `what's preline ui figma?`, `create a table example with preline using avatars, badges and progress bars`, `show me the code`, `quiz me about tailwindcss`, `generate 3-dimensional abstract images`, `what's tailwindcss?`, and `2 files uploaded`; every user row uses a `size-9.5 rounded-full bg-surface-5` avatar with the initials `AZ`.
  - The opening assistant row is `How can we help?` followed by `You can ask questions like:` and exactly three bullets: `What's Preline UI?`, `How many Starter Pages & Examples are there?`, `Is there a PRO version?`.
  - Six assistant answers each end with the same action row: a rounded-full thumbs-up/thumbs-down rate pair, then `Copy` and `Share` pill buttons, with `New answer` pushed right at `sm:` via `sm:flex sm:justify-between`.
  - The table answer opens with `Hold on a sec...` and renders 4 columns `Name`, `Status`, `Portfolio`, `Created` over 4 rows: Christina Bersh / `Active` / `1/5` at 25% / `28 Dec, 12:12`; David Harrison / `Warning` / `3/5` at 78% / `20 Dec, 09:27`; Anne Richard (letter `A` avatar) / `Active` / `5/5` at 100% / `18 Dec, 15:20`; Samia Kartoon / `Active` / `0/5` at 1% / `18 Dec, 15:20`.
  - The image answer says `Here you go...` above a 2x2 `grid grid-cols-2 gap-1 rounded-lg overflow-hidden` of four `aspect-[16/9]` photos all captioned alt `Deep Learning`; the code answer says `Of course!` above a dark `font-mono` snippet panel.
  - Outlined primary suggestion chips appear twice: `Is Tailwind CSS a free library?`, `What's the latest Tailwind CSS version?`, `Is it a utility-class based?` under the quiz answer, then a right-aligned pair `What is the use of Tailwind CSS?` and `What is the difference between Tailwind CSS and CSS?`; the final user row lists `resume_web_ui_developer.csv` and `coverletter_web_ui_developer.pdf`, each with a `Download` action.
  - A `sticky bottom-0 z-10 bg-layer border-t border-layer-line` composer holds `New chat` and `Stop generating` above a textarea with placeholder `Ask me anything...`, plus four muted icon buttons and one primary send button; the block is fully static with no `data-hs-*` attributes and no Preline JS plugins.

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="relative h-screen">
        <div class="py-10 lg:py-14">
          
          <div class="max-w-4xl px-4 sm:px-6 lg:px-8 mx-auto text-center">
            <a class="inline-block mb-4 flex-none focus:outline-hidden focus:opacity-80" href="#" aria-label="Preline">
              <svg class="w-28 h-auto mx-auto" width="116" height="32" viewBox="0 0 116 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M33.5696 30.2968V10.7968H37.4474V13.1789H37.6229C37.7952 12.7972 38.0445 12.4094 38.3707 12.0155C38.7031 11.6154 39.134 11.283 39.6634 11.0183C40.1989 10.7475 40.8636 10.6121 41.6577 10.6121C42.6918 10.6121 43.6458 10.8829 44.5199 11.4246C45.3939 11.9601 46.0926 12.7695 46.6158 13.8529C47.139 14.93 47.4006 16.2811 47.4006 17.9061C47.4006 19.488 47.1451 20.8237 46.6342 21.9132C46.1295 22.9966 45.4401 23.8183 44.5661 24.3784C43.6982 24.9324 42.7256 25.2094 41.6484 25.2094C40.8852 25.2094 40.2358 25.0832 39.7003 24.8308C39.1709 24.5785 38.737 24.2615 38.3984 23.8799C38.0599 23.4921 37.8014 23.1012 37.6229 22.7073H37.5028V30.2968H33.5696ZM37.4197 17.8877C37.4197 18.7309 37.5367 19.4665 37.7706 20.0943C38.0045 20.7222 38.343 21.2115 38.7862 21.5624C39.2294 21.9071 39.768 22.0794 40.402 22.0794C41.0421 22.0794 41.5838 21.904 42.027 21.5532C42.4702 21.1961 42.8056 20.7037 43.0334 20.0759C43.2673 19.4419 43.3842 18.7125 43.3842 17.8877C43.3842 17.069 43.2704 16.3488 43.0426 15.7272C42.8149 15.1055 42.4794 14.6192 42.0362 14.2683C41.593 13.9175 41.0483 13.7421 40.402 13.7421C39.7618 13.7421 39.2202 13.9113 38.777 14.2499C38.34 14.5884 38.0045 15.0685 37.7706 15.6902C37.5367 16.3119 37.4197 17.0444 37.4197 17.8877ZM49.2427 24.9786V10.7968H53.0559V13.2712H53.2037C53.4622 12.391 53.8961 11.7262 54.5055 11.2769C55.1149 10.8214 55.8166 10.5936 56.6106 10.5936C56.8076 10.5936 57.02 10.6059 57.2477 10.6306C57.4754 10.6552 57.6755 10.689 57.8478 10.7321V14.2222C57.6632 14.1668 57.4077 14.1175 57.0815 14.0745C56.7553 14.0314 56.4567 14.0098 56.1859 14.0098C55.6073 14.0098 55.0903 14.136 54.6348 14.3884C54.1854 14.6346 53.8284 14.9793 53.5638 15.4225C53.3052 15.8657 53.176 16.3765 53.176 16.9551V24.9786H49.2427ZM64.9043 25.2556C63.4455 25.2556 62.1898 24.9601 61.1373 24.3692C60.0909 23.7721 59.2845 22.9289 58.7182 21.8394C58.1519 20.7437 57.8688 19.448 57.8688 17.9523C57.8688 16.4935 58.1519 15.2132 58.7182 14.1114C59.2845 13.0096 60.0816 12.1509 61.1096 11.5354C62.1437 10.9199 63.3563 10.6121 64.7474 10.6121C65.683 10.6121 66.5539 10.7629 67.3603 11.0645C68.1728 11.36 68.8806 11.8062 69.4839 12.4033C70.0932 13.0004 70.5672 13.7513 70.9057 14.6561C71.2443 15.5548 71.4135 16.6074 71.4135 17.8138V18.8941H59.4384V16.4566H67.7111C67.7111 15.8903 67.588 15.3886 67.3418 14.9516C67.0956 14.5146 66.754 14.1729 66.317 13.9267C65.8861 13.6744 65.3844 13.5482 64.812 13.5482C64.2149 13.5482 63.6856 13.6867 63.2239 13.9637C62.7684 14.2345 62.4114 14.6007 62.1529 15.0624C61.8944 15.5179 61.762 16.0257 61.7559 16.5858V18.9033C61.7559 19.605 61.8851 20.2113 62.1437 20.7222C62.4083 21.2331 62.7807 21.627 63.2608 21.904C63.741 22.181 64.3103 22.3195 64.9689 22.3195C65.406 22.3195 65.8061 22.2579 66.1692 22.1348C66.5324 22.0117 66.8432 21.8271 67.1018 21.5808C67.3603 21.3346 67.5572 21.033 67.6927 20.676L71.3304 20.9161C71.1458 21.7901 70.7672 22.5534 70.1948 23.2058C69.6285 23.8522 68.896 24.3569 67.9974 24.7201C67.1048 25.0771 66.0738 25.2556 64.9043 25.2556ZM77.1335 6.06949V24.9786H73.2003V6.06949H77.1335ZM79.5043 24.9786V10.7968H83.4375V24.9786H79.5043ZM81.4801 8.96863C80.8954 8.96863 80.3937 8.77474 79.9752 8.38696C79.5628 7.99302 79.3566 7.52214 79.3566 6.97431C79.3566 6.43265 79.5628 5.96792 79.9752 5.58014C80.3937 5.1862 80.8954 4.98923 81.4801 4.98923C82.0649 4.98923 82.5635 5.1862 82.9759 5.58014C83.3944 5.96792 83.6037 6.43265 83.6037 6.97431C83.6037 7.52214 83.3944 7.99302 82.9759 8.38696C82.5635 8.77474 82.0649 8.96863 81.4801 8.96863ZM89.7415 16.7797V24.9786H85.8083V10.7968H89.5569V13.2989H89.723C90.037 12.4741 90.5632 11.8216 91.3019 11.3415C92.0405 10.8552 92.9361 10.6121 93.9887 10.6121C94.9735 10.6121 95.8322 10.8275 96.5647 11.2584C97.2971 11.6893 97.8665 12.3048 98.2728 13.105C98.679 13.899 98.8821 14.8469 98.8821 15.9487V24.9786H94.9489V16.6505C94.9551 15.7826 94.7335 15.1055 94.2841 14.6192C93.8348 14.1268 93.2162 13.8806 92.4283 13.8806C91.8989 13.8806 91.4311 13.9944 91.0249 14.2222C90.6248 14.4499 90.3109 14.7823 90.0831 15.2193C89.8615 15.6502 89.7477 16.1703 89.7415 16.7797ZM107.665 25.2556C106.206 25.2556 104.951 24.9601 103.898 24.3692C102.852 23.7721 102.045 22.9289 101.479 21.8394C100.913 20.7437 100.63 19.448 100.63 17.9523C100.63 16.4935 100.913 15.2132 101.479 14.1114C102.045 13.0096 102.842 12.1509 103.87 11.5354C104.905 10.9199 106.117 10.6121 107.508 10.6121C108.444 10.6121 109.315 10.7629 110.121 11.0645C110.934 11.36 111.641 11.8062 112.245 12.4033C112.854 13.0004 113.328 13.7513 113.667 14.6561C114.005 15.5548 114.174 16.6074 114.174 17.8138V18.8941H102.199V16.4566H110.472C110.472 15.8903 110.349 15.3886 110.103 14.9516C109.856 14.5146 109.515 14.1729 109.078 13.9267C108.647 13.6744 108.145 13.5482 107.573 13.5482C106.976 13.5482 106.446 13.6867 105.985 13.9637C105.529 14.2345 105.172 14.6007 104.914 15.0624C104.655 15.5179 104.523 16.0257 104.517 16.5858V18.9033C104.517 19.605 104.646 20.2113 104.905 20.7222C105.169 21.2331 105.542 21.627 106.022 21.904C106.502 22.181 107.071 22.3195 107.73 22.3195C108.167 22.3195 108.567 22.2579 108.93 22.1348C109.293 22.0117 109.604 21.8271 109.863 21.5808C110.121 21.3346 110.318 21.033 110.454 20.676L114.091 20.9161C113.907 21.7901 113.528 22.5534 112.956 23.2058C112.389 23.8522 111.657 24.3569 110.758 24.7201C109.866 25.0771 108.835 25.2556 107.665 25.2556Z" fill="currentColor" class="fill-primary"/>
                <path d="M1 28.9786V15.9786C1 9.35116 6.37258 3.97858 13 3.97858C19.6274 3.97858 25 9.35116 25 15.9786C25 22.606 19.6274 27.9786 13 27.9786H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/>
                <path d="M5 28.9786V16.1386C5 11.6319 8.58172 7.97858 13 7.97858C17.4183 7.97858 21 11.6319 21 16.1386C21 20.6452 17.4183 24.2986 13 24.2986H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/>
                <circle cx="13" cy="16" r="5" fill="currentColor" class="fill-primary"/>
              </svg>
            </a>

<h1 class="text-3xl font-bold text-foreground sm:text-4xl">
              Welcome to Preline AI
            </h1>
            <p class="mt-3 text-muted-foreground-2">
              Your AI-powered copilot for the web
            </p>
          </div>

<div class="space-y-3">
                <h2 class="font-medium text-foreground">
                  How can we help?
                </h2>
                <div class="space-y-1.5">
                  <p class="mb-1.5 text-sm text-foreground">
                    You can ask questions like:
                  </p>
                  <ul class="list-disc list-outside space-y-1.5 ps-3.5">
                    <li class="text-sm text-foreground">
                      What's Preline UI?
                    </li>

<li class="text-sm text-foreground">
                      How many Starter Pages & Examples are there?
                    </li>

<li class="text-sm text-foreground">
                      Is there a PRO version?
                    </li>
                  </ul>
                </div>
              </div>
            </li>

<li class="py-2 sm:py-4">
              <div class="max-w-4xl px-4 sm:px-6 lg:px-8 mx-auto">
                <div class="max-w-2xl flex gap-x-2 sm:gap-x-4">
                  <span class="shrink-0 inline-flex items-center justify-center size-9.5 rounded-full bg-surface-5">
                    <span class="text-sm font-medium text-foreground-inverse">AZ</span>
                  </span>

<div class="grow mt-2 space-y-3">
                    <p class="text-foreground">
                      what's preline ui?
                    </p>
                  </div>
                </div>
              </div>
            </li>

<li class="max-w-4xl py-2 px-4 sm:px-6 lg:px-8 mx-auto flex gap-x-2 sm:gap-x-4">
              <svg class="shrink-0 size-9.5 rounded-full" width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="38" height="38" rx="6" fill="currentColor" class="fill-primary"/>
                <path d="M10 28V18.64C10 13.8683 14.0294 10 19 10C23.9706 10 28 13.8683 28 18.64C28 23.4117 23.9706 27.28 19 27.28H18.25" stroke="white" stroke-width="1.5"/>
                <path d="M13 28V18.7552C13 15.5104 15.6863 12.88 19 12.88C22.3137 12.88 25 15.5104 25 18.7552C25 22 22.3137 24.6304 19 24.6304H18.25" stroke="white" stroke-width="1.5"/>
                <ellipse cx="19" cy="18.6554" rx="3.75" ry="3.6" fill="white"/>
              </svg>

<div class="grow max-w-[90%] md:max-w-2xl w-full space-y-3">
                
                <div class="space-y-3">
                  <p class="text-sm text-foreground">
                    Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
                  </p>
                  <div class="space-y-1.5">
                    <p class="text-sm text-foreground">
                      Here're some links to get started
                    </p>
                    <ul>
                      <li>
                        <a class="text-sm text-primary decoration-2 hover:underline focus:outline-hidden focus:underline font-medium" href="#">
                          Installation Guide
                        </a>
                      </li>
                      <li>
                        <a class="text-sm text-primary decoration-2 hover:underline focus:outline-hidden focus:underline font-medium" href="../../../docs/frameworks.html">
                          Framework Guides
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
                
          
                
                <div>
                  <div class="sm:flex sm:justify-between">
                    <div>
                      
                      <div class="inline-flex bg-layer border border-layer-line rounded-full p-0.5">
                        <button type="button" class="inline-flex shrink-0 justify-center items-center size-8 rounded-full text-muted-foreground-1 hover:bg-primary-100 hover:text-primary focus:z-10 focus:outline-hidden focus:bg-primary-100 focus:text-primary dark:hover:bg-primary-500/20 dark:focus:bg-primary-500/20">
                          <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="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z"/></svg>
                        </button>
                        <button type="button" class="inline-flex shrink-0 justify-center items-center size-8 rounded-full text-muted-foreground-1 hover:bg-primary-100 hover:text-primary focus:z-10 focus:outline-hidden focus:bg-primary-100 focus:text-primary dark:hover:bg-primary-500/20 dark:focus:bg-primary-500/20">
                          <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 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z"/></svg>
                        </button>
                      </div>
                      
                      <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm rounded-full border border-transparent text-muted-foreground-1 hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus 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="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z"/></svg>
                        Copy
                      </button>
                      <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm rounded-full border border-transparent text-muted-foreground-1 hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus 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"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                        Share
                      </button>
                    </div>

<div class="mt-1 sm:mt-0">
                      <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm rounded-full border border-transparent text-muted-foreground-1 hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus 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="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>
                        New answer
                      </button>
                    </div>
                  </div>
                </div>
                
              </div>
            </li>

<div class="grow mt-2 space-y-3">
                    <p class="text-foreground">
                      what's preline ui figma?
                    </p>
                    <div class="mt-3">
                      <button type="button" class="p-2 inline-flex items-center gap-x-2 text-xs font-semibold rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus 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"><polygon points="5 3 19 12 5 21 5 3"/></svg>
                        Voice message
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </li>

<div class="grow max-w-[90%] md:max-w-2xl w-full space-y-3">
                
                <div class="space-y-3">
                  <p class="text-sm text-foreground">
                    Preline UI Figma is the largest free design system for Figma, crafted with Tailwind CSS styles and Preline UI components with extra top-notch additions.
                  </p>
                  <div class="space-y-1.5">
                    <p class="text-sm text-foreground">
                      With the features like:
                    </p>
                    <ul class="list-disc list-outside space-y-1.5 ps-3.5">
                      <li class="text-sm text-foreground">
                        12-column Grid System
                      </li>

<li class="text-sm text-foreground">
                        Easily find UI elements
                      </li>

<li class="text-sm text-foreground">
                        Variants and Properties
                      </li>

<li class="text-sm text-foreground">
                        Tailwind CSS Color styles
                      </li>

<li class="text-sm text-foreground">
                        Auto layout and constraints
                      </li>
                    </ul>
                  </div>
                </div>
                
          
                
                <div>
                  <div class="sm:flex sm:justify-between">
                    <div>
                      
                      <div class="inline-flex bg-layer border border-layer-line rounded-full p-0.5">
                        <button type="button" class="inline-flex shrink-0 justify-center items-center size-8 rounded-full text-muted-foreground-1 hover:bg-primary-100 hover:text-primary focus:z-10 focus:outline-hidden focus:bg-primary-100 focus:text-primary dark:hover:bg-primary-500/20 dark:focus:bg-primary-500/20">
                          <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="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z"/></svg>
                        </button>
                        <button type="button" class="inline-flex shrink-0 justify-center items-center size-8 rounded-full text-muted-foreground-1 hover:bg-primary-100 hover:text-primary focus:z-10 focus:outline-hidden focus:bg-primary-100 focus:text-primary dark:hover:bg-primary-500/20 dark:focus:bg-primary-500/20">
                          <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 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z"/></svg>
                        </button>
                      </div>
                      
                      <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm rounded-full border border-transparent text-muted-foreground-1 hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus 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="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z"/></svg>
                        Copy
                      </button>
                      <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm rounded-full border border-transparent text-muted-foreground-1 hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus 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"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                        Share
                      </button>
                    </div>

<div class="grow mt-2 space-y-3">
                    <p class="text-foreground">
                      create a table example with preline using avatars, badges and progress bars
                    </p>
                  </div>
                </div>
              </div>
            </li>

<div class="bg-layer border border-table-line rounded-xl shadow-2xs overflow-hidden">
                  
                  <div class="-m-1.5 overflow-x-auto">
                    <div class="p-1.5 min-w-full inline-block align-middle">
                      <table class="min-w-full divide-y divide-table-line">
                        <thead class="bg-muted">
                          <tr>
                            <th scope="col" class="px-6 py-3 text-start">
                              <div class="flex items-center gap-x-2">
                                <span class="text-xs font-semibold uppercase text-foreground">
                                  Name
                                </span>
                              </div>
                            </th>

<th scope="col" class="px-6 py-3 text-start">
                              <div class="flex items-center gap-x-2">
                                <span class="text-xs font-semibold uppercase text-foreground">
                                  Status
                                </span>
                              </div>
                            </th>

<th scope="col" class="px-6 py-3 text-start">
                              <div class="flex items-center gap-x-2">
                                <span class="text-xs font-semibold uppercase text-foreground">
                                  Portfolio
                                </span>
                              </div>
                            </th>

<th scope="col" class="px-6 py-3 text-start">
                              <div class="flex items-center gap-x-2">
                                <span class="text-xs font-semibold uppercase text-foreground">
                                  Created
                                </span>
                              </div>
                            </th>
                          </tr>
                        </thead>

<tbody class="divide-y divide-table-line">
                          <tr>
                            <td class="size-px whitespace-nowrap">
                              <div class="px-6 py-3">
                                <div class="flex items-center gap-x-3">
                                  <img class="inline-block size-9.5 rounded-full" src="https://images.unsplash.com/photo-1531927557220-a9e23c1e4794?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Avatar">
                                  <div class="grow">
                                    <span class="block text-sm font-semibold text-foreground">Christina Bersh</span>
                                    <span class="block text-sm text-muted-foreground-1">christina@site.com</span>
                                  </div>
                                </div>
                              </div>
                            </td>
                            <td class="size-px whitespace-nowrap">
                              <div class="px-6 py-3">
                                <span class="inline-flex items-center gap-1.5 py-0.5 px-2 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                                  <svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                                  </svg>
                                  Active
                                </span>
                              </div>
                            </td>
                            <td class="size-px whitespace-nowrap">
                              <div class="px-6 py-3">
                                <div class="flex items-center gap-x-3">
                                  <span class="text-xs text-muted-foreground-1">1/5</span>
                                  <div class="flex w-full h-1.5 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                    <div class="flex flex-col justify-center overflow-hidden bg-secondary text-xs text-center whitespace-nowrap" style="width: 25%"></div>
                                  </div>
                                </div>
                              </div>
                            </td>
                            <td class="size-px whitespace-nowrap">
                              <div class="px-6 py-3">
                                <span class="text-sm text-muted-foreground-1">28 Dec, 12:12</span>
                              </div>
                            </td>
                          </tr>

<tr>
                            <td class="size-px whitespace-nowrap">
                              <div class="px-6 py-3">
                                <div class="flex items-center gap-x-3">
                                  <span class="inline-flex items-center justify-center size-9.5 rounded-full bg-surface-2">
                                    <span class="font-medium text-foreground">A</span>
                                  </span>
                                  <div class="grow">
                                    <span class="block text-sm font-semibold text-foreground">Anne Richard</span>
                                    <span class="block text-sm text-muted-foreground-1">anne@site.com</span>
                                  </div>
                                </div>
                              </div>
                            </td>
                            <td class="size-px whitespace-nowrap">
                              <div class="px-6 py-3">
                                <span class="inline-flex items-center gap-1.5 py-0.5 px-2 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                                  <svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                                  </svg>
                                  Active
                                </span>
                              </div>
                            </td>
                            <td class="size-px whitespace-nowrap">
                              <div class="px-6 py-3">
                                <div class="flex items-center gap-x-3">
                                  <span class="text-xs text-muted-foreground-1">5/5</span>
                                  <div class="flex w-full h-1.5 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                                    <div class="flex flex-col justify-center overflow-hidden bg-secondary text-xs text-center whitespace-nowrap" style="width: 100%"></div>
                                  </div>
                                </div>
                              </div>
                            </td>
                            <td class="size-px whitespace-nowrap">
                              <div class="px-6 py-3">
                                <span class="text-sm text-muted-foreground-1">18 Dec, 15:20</span>
                              </div>
                            </td>
                          </tr>

<tr>
                            <td class="size-px whitespace-nowrap">
                              <div class="px-6 py-3">
                                <div class="flex items-center gap-x-3">
                                  <img class="inline-block size-9.5 rounded-full" src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&&auto=format&fit=facearea&facepad=3&w=300&h=300&q=80" alt="Avatar">
                                  <div class="grow">
                                    <span class="block text-sm font-semibold text-foreground">Samia Kartoon</span>
                                    <span class="block text-sm text-muted-foreground-1">samia@site.com</span>
                                  </div>
                                </div>
                              </div>
                            </td>
                            <td class="size-px whitespace-nowrap">
                              <div class="px-6 py-3">
                                <span class="inline-flex items-center gap-1.5 py-0.5 px-2 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                                  <svg class="size-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                                  </svg>
                                  Active
                                </span>
                              </div>
                            </td>
                            <td class="size-px whitespace-nowrap">
                              <div class="px-6 py-3">
                                <div class="flex items-center gap-x-3">
                                  <span class="text-xs text-muted-foreground-1">0/5</span>
                                  <div class="flex w-full h-1.5 bg-surface-1 rounded-full overflow-hidden" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100">
                                    <div class="flex flex-col justify-center overflow-hidden bg-secondary text-xs text-center whitespace-nowrap" style="width: 1%"></div>
                                  </div>
                                </div>
                              </div>
                            </td>
                            <td class="size-px whitespace-nowrap">
                              <div class="px-6 py-3">
                                <span class="text-sm text-muted-foreground-1">18 Dec, 15:20</span>
                              </div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                  
                </div>
                
          
                
                <div>
                  <div class="sm:flex sm:justify-between">
                    <div>
                      
                      <div class="inline-flex bg-layer border border-layer-line rounded-full p-0.5">
                        <button type="button" class="inline-flex shrink-0 justify-center items-center size-8 rounded-full text-muted-foreground-1 hover:bg-primary-100 hover:text-primary focus:z-10 focus:outline-hidden focus:bg-primary-100 focus:text-primary dark:hover:bg-primary-500/20 dark:focus:bg-primary-500/20">
                          <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="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z"/></svg>
                        </button>
                        <button type="button" class="inline-flex shrink-0 justify-center items-center size-8 rounded-full text-muted-foreground-1 hover:bg-primary-100 hover:text-primary focus:z-10 focus:outline-hidden focus:bg-primary-100 focus:text-primary dark:hover:bg-primary-500/20 dark:focus:bg-primary-500/20">
                          <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 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z"/></svg>
                        </button>
                      </div>
                      
                      <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm rounded-full border border-transparent text-muted-foreground-1 hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus 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="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z"/></svg>
                        Copy
                      </button>
                      <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm rounded-full border border-transparent text-muted-foreground-1 hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus 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"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                        Share
                      </button>
                    </div>

<div class="grow max-w-[90%] md:max-w-2xl w-full space-y-3">
                
                <div class="space-y-3">
                  <p class="text-sm text-foreground">
                    Of course!
                  </p>
                </div>

<div class="mt-3 flex-none min-w-full bg-inverse font-mono text-sm p-5 rounded-lg"><span class="text-red-500"><</span><span class="text-red-500">table <span class="text-muted-foreground">class="<span class="text-sky-400">min-w-full divide-y divide-table-line</span>"</span><span class="text-red-500">></span><span class="block"></span>  <span class="ms-5 text-red-500"><</span><span class="text-red-500">thead <span class="text-muted-foreground">class="<span class="text-sky-400">bg-muted</span>"</span><span class="text-red-500">></span><span class="block"></span><span class="text-red-500">    <span class="ms-10 text-muted-foreground-1">...</span></span></span></span></div>
          
                
                <div>
                  <div class="sm:flex sm:justify-between">
                    <div>
                      
                      <div class="inline-flex bg-layer border border-layer-line rounded-full p-0.5">
                        <button type="button" class="inline-flex shrink-0 justify-center items-center size-8 rounded-full text-muted-foreground-1 hover:bg-primary-100 hover:text-primary focus:z-10 focus:outline-hidden focus:bg-primary-100 focus:text-primary dark:hover:bg-primary-500/20 dark:focus:bg-primary-500/20">
                          <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="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z"/></svg>
                        </button>
                        <button type="button" class="inline-flex shrink-0 justify-center items-center size-8 rounded-full text-muted-foreground-1 hover:bg-primary-100 hover:text-primary focus:z-10 focus:outline-hidden focus:bg-primary-100 focus:text-primary dark:hover:bg-primary-500/20 dark:focus:bg-primary-500/20">
                          <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 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z"/></svg>
                        </button>
                      </div>
                      
                      <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm rounded-full border border-transparent text-muted-foreground-1 hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus 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="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z"/></svg>
                        Copy
                      </button>
                      <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm rounded-full border border-transparent text-muted-foreground-1 hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus 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"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                        Share
                      </button>
                    </div>

<div class="grow mt-2 space-y-3">
                    <p class="text-foreground">
                      quiz me about tailwindcss
                    </p>
                  </div>
                </div>
              </div>
            </li>

<div class="grow max-w-[90%] md:max-w-2xl w-full space-y-3">
                
                <div class="space-y-3">
                  <p class="text-sm text-foreground">
                    Sure!
                  </p>
                </div>
                
          
                <div>
                  <button type="button" class="mb-2.5 me-1.5 py-2 px-3 inline-flex justify-center items-center gap-x-2 rounded-lg border border-primary text-primary align-middle hover:bg-primary-50 focus:outline-hidden focus:bg-primary-50 text-sm">
                    Is Tailwind CSS a free library?
                  </button>
                  <button type="button" class="mb-2.5 me-1.5 py-2 px-3 inline-flex justify-center items-center gap-x-2 rounded-lg border border-primary text-primary align-middle hover:bg-primary-50 focus:outline-hidden focus:bg-primary-50 text-sm">
                    What's the latest Tailwind CSS version?
                  </button>
                  <button type="button" class="mb-2.5 me-1.5 py-2 px-3 inline-flex justify-center items-center gap-x-2 rounded-lg border border-primary text-primary align-middle hover:bg-primary-50 focus:outline-hidden focus:bg-primary-50 text-sm">
                    Is it a utility-class based?
                  </button>
                </div>
          
                
                <div>
                  <div class="sm:flex sm:justify-between">
                    <div>
                      
                      <div class="inline-flex bg-layer border border-layer-line rounded-full p-0.5">
                        <button type="button" class="inline-flex shrink-0 justify-center items-center size-8 rounded-full text-muted-foreground-1 hover:bg-primary-100 hover:text-primary focus:z-10 focus:outline-hidden focus:bg-primary-100 focus:text-primary dark:hover:bg-primary-500/20 dark:focus:bg-primary-500/20">
                          <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="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z"/></svg>
                        </button>
                        <button type="button" class="inline-flex shrink-0 justify-center items-center size-8 rounded-full text-muted-foreground-1 hover:bg-primary-100 hover:text-primary focus:z-10 focus:outline-hidden focus:bg-primary-100 focus:text-primary dark:hover:bg-primary-500/20 dark:focus:bg-primary-500/20">
                          <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 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z"/></svg>
                        </button>
                      </div>
                      
                      <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm rounded-full border border-transparent text-muted-foreground-1 hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus 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="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z"/></svg>
                        Copy
                      </button>
                      <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm rounded-full border border-transparent text-muted-foreground-1 hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus 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"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                        Share
                      </button>
                    </div>

<div class="grow mt-2 space-y-3">
                    <p class="text-foreground">
                      generate 3-dimensional abstract images
                    </p>
                  </div>
                </div>
              </div>
            </li>

<div>
                  <div class="sm:flex sm:justify-between">
                    <div>
                      
                      <div class="inline-flex bg-layer border border-layer-line rounded-full p-0.5">
                        <button type="button" class="inline-flex shrink-0 justify-center items-center size-8 rounded-full text-muted-foreground-1 hover:bg-primary-100 hover:text-primary focus:z-10 focus:outline-hidden focus:bg-primary-100 focus:text-primary dark:hover:bg-primary-500/20 dark:focus:bg-primary-500/20">
                          <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="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z"/></svg>
                        </button>
                        <button type="button" class="inline-flex shrink-0 justify-center items-center size-8 rounded-full text-muted-foreground-1 hover:bg-primary-100 hover:text-primary focus:z-10 focus:outline-hidden focus:bg-primary-100 focus:text-primary dark:hover:bg-primary-500/20 dark:focus:bg-primary-500/20">
                          <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 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z"/></svg>
                        </button>
                      </div>
                      
                      <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm rounded-full border border-transparent text-muted-foreground-1 hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus 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="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z"/></svg>
                        Copy
                      </button>
                      <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm rounded-full border border-transparent text-muted-foreground-1 hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus 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"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                        Share
                      </button>
                    </div>

<div class="grow mt-2 space-y-3">
                    <p class="text-foreground">
                      what's tailwindcss?
                    </p>
                  </div>
                </div>
              </div>
            </li>

<div class="grow max-w-[90%] md:max-w-2xl w-full space-y-3">
                
                <div class="space-y-3">
                  <p class="text-sm text-foreground">
                    Tailwind CSS is an open source CSS framework. The main feature of this library is that, unlike other CSS frameworks like Bootstrap, it does not provide a series of predefined classes for elements such as buttons or tables.
                  </p>
                  <div class="space-y-1.5">
                    <ul>
                      <li>
                        <a class="text-sm text-primary decoration-2 hover:underline focus:outline-hidden focus:underline font-medium" href="#">
                          Get started with Tailwind CSS
                        </a>
                      </li>
                      <li>
                        <a class="text-sm text-primary decoration-2 hover:underline focus:outline-hidden focus:underline font-medium" href="#">
                          Tailwind CSS Installation guide
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
                
          
                
                <div>
                  <div class="sm:flex sm:justify-between">
                    <div>
                      
                      <div class="inline-flex bg-layer border border-layer-line rounded-full p-0.5">
                        <button type="button" class="inline-flex shrink-0 justify-center items-center size-8 rounded-full text-muted-foreground-1 hover:bg-primary-100 hover:text-primary focus:z-10 focus:outline-hidden focus:bg-primary-100 focus:text-primary dark:hover:bg-primary-500/20 dark:focus:bg-primary-500/20">
                          <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="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z"/></svg>
                        </button>
                        <button type="button" class="inline-flex shrink-0 justify-center items-center size-8 rounded-full text-muted-foreground-1 hover:bg-primary-100 hover:text-primary focus:z-10 focus:outline-hidden focus:bg-primary-100 focus:text-primary dark:hover:bg-primary-500/20 dark:focus:bg-primary-500/20">
                          <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 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z"/></svg>
                        </button>
                      </div>
                      
                      <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm rounded-full border border-transparent text-muted-foreground-1 hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus 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="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z"/></svg>
                        Copy
                      </button>
                      <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm rounded-full border border-transparent text-muted-foreground-1 hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus 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"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                        Share
                      </button>
                    </div>

<li class="py-2 sm:py-4">
              <div class="max-w-4xl px-4 sm:px-6 lg:px-8 mx-auto">
                <div class="max-w-2xl flex gap-x-2 sm:gap-x-4">
                  <div>
                    <div class="text-end">
                      <button type="button" class="ms-1.5 mb-1.5 py-2 px-3 inline-flex justify-center items-center gap-x-2 rounded-lg border border-primary text-primary align-middle hover:bg-primary-50 focus:outline-hidden focus:bg-primary-50 text-sm">
                        What is the use of Tailwind CSS?
                      </button>
                      <button type="button" class="ms-1.5 mb-1.5 py-2 px-3 inline-flex justify-center items-center gap-x-2 rounded-lg border border-primary text-primary align-middle hover:bg-primary-50 focus:outline-hidden focus:bg-primary-50 text-sm">
                        What is the difference between Tailwind CSS and CSS?
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </li>

<div class="grow mt-2 space-y-3">
                    <p class="text-foreground">
                      2 files uploaded
                    </p>

<ul class="w-full flex flex-col justify-end text-start -space-y-px">
                      <li class="flex items-center gap-x-2 p-3 text-sm bg-layer border border-layer-line text-layer-foreground first:rounded-t-lg first:mt-0 last:rounded-b-lg">
                        <div class="w-full flex justify-between truncate">
                          <span class="me-3 flex-1 w-0 truncate">
                            resume_web_ui_developer.csv
                          </span>
                          <button type="button" class="flex items-center gap-x-2 text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus whitespace-nowrap">
                            <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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
                            Download
                          </button>
                        </div>
                      </li>
                      <li class="flex items-center gap-x-2 p-3 text-sm bg-layer border border-layer-line text-layer-foreground first:rounded-t-lg first:mt-0 last:rounded-b-lg">
                        <div class="w-full flex justify-between truncate">
                          <span class="me-3 flex-1 w-0 truncate">
                            coverletter_web_ui_developer.pdf
                          </span>
                          <button type="button" class="flex items-center gap-x-2 text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus whitespace-nowrap">
                            <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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
                            Download
                          </button>
                        </div>
                      </li>
                    </ul>
                    
                  </div>
                </div>
              </div>
            </li>
            
          </ul>
        </div>
  
        <div class="sticky bottom-0 z-10 bg-layer border-t border-layer-line pt-2 pb-3 sm:pt-4 sm:pb-6">
          
          <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-0">
            <div class="flex justify-between items-center mb-3">
              <button type="button" class="inline-flex justify-center items-center gap-x-2 rounded-lg font-medium text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-hover text-xs sm:text-sm">
                <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="M5 12h14"/><path d="M12 5v14"/></svg>
                New chat
              </button>

<button type="button" class="py-1.5 px-2 inline-flex items-center gap-x-2 text-xs font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none">
                <svg class="size-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M5 3.5h6A1.5 1.5 0 0 1 12.5 5v6a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 11V5A1.5 1.5 0 0 1 5 3.5z"/>
                </svg>
                Stop generating
              </button>
            </div>

<div class="relative">
              <textarea class="p-3 sm:p-4 pb-12 sm:pb-12 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb" placeholder="Ask me anything..."></textarea>

<div class="absolute bottom-px inset-x-px p-2 rounded-b-lg bg-layer">
                <div class="flex flex-wrap justify-between items-center gap-2">
                  
                  <div class="flex items-center">
                    
                    <button type="button" class="inline-flex shrink-0 justify-center items-center size-8 rounded-lg text-muted-foreground-1 hover:bg-muted-hover focus:z-10 focus:outline-hidden focus:bg-muted-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"><rect width="18" height="18" x="3" y="3" rx="2"/><line x1="9" x2="15" y1="15" y2="9"/></svg>
                    </button>

<button type="button" class="inline-flex shrink-0 justify-center items-center size-8 rounded-lg text-muted-foreground-1 hover:bg-muted-hover focus:z-10 focus:outline-hidden focus:bg-muted-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="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
                    </button>
                    
                  </div>

<div class="flex items-center gap-x-1">
                    
                    <button type="button" class="inline-flex shrink-0 justify-center items-center size-8 rounded-lg text-muted-foreground-1 hover:bg-muted-hover focus:z-10 focus:outline-hidden focus:bg-muted-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="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>

<button type="button" class="inline-flex shrink-0 justify-center items-center size-8 rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:z-10 focus:outline-hidden focus:bg-primary-focus">
                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083l6-15Zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471-.47 1.178Z"/>
                      </svg>
                    </button>
                    
                  </div>
                  
                </div>
              </div>
              
            </div>
            
          </div>
          
        </div>
      </div>

Centered AI Chat Page with Alternating Chat Bubbles Free

Centered AI chat page presents alternating assistant and user chat bubbles with feedback controls and follow-up actions.

Create a responsive UI block named "Centered AI Chat Page with Alternating Chat Bubbles" 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/application-pages/ai-interface-pages/#centered-ai-chat-page-with-alternating-chat-bubbles. 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.

Source metadata:
- Catalog family: application-pages/ai-interface-pages
- Block ID: centered-ai-chat-page-with-alternating-chat-bubbles
- Source description: Centered AI chat page presents alternating assistant and user chat bubbles with feedback controls and follow-up actions.
- Preview iframe: https://preline.co/blocks/application-pages/ai-interface-pages/iframes/free/centered-ai-chat-page-with-alternating-chat-bubbles.html (repo path: blocks/application-pages/ai-interface-pages/iframes/free/centered-ai-chat-page-with-alternating-chat-bubbles.html)
- Source markup reference:
  - partials/blocks/sources/pages/ai-chat.html
  - partials/pro/logos/logo.html
  - partials/docs/components/buttons-rate.html
  - partials/docs/components/list-group-example-download.html
  - partials/blocks/sources/pages/ti-chat-format.html

Block-specific fidelity rules:
- Preserve source layout width, wrapper hierarchy, component geometry, responsive order, interaction contents, and exact visible copy.
- Do not replace custom source details with default badges, buttons, cards, placeholders, or unrelated components.
- Source content inventory (from the source markup):
  - No sidebar: one centered column `max-w-4xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto` inside `relative h-screen`, headed by the Preline logo, h1 `Welcome to Preline AI`, and `Your AI-powered copilot for the web`.
  - Feed is a `ul` (`mt-16 space-y-5`) of 17 bubbles alternating sides: assistant bubbles sit left with a 38x38 rounded primary Preline mark and a `bg-layer border border-layer-line rounded-lg p-4` card; user bubbles sit right (`max-w-2xl ms-auto flex justify-end`) as `bg-primary rounded-lg p-4` cards with white text and an `AZ` initials avatar on the right.
  - Scripted copy: assistant opener `How can we help?` with sample questions (`What's Preline UI?`, `How many Starter Pages & Examples are there?`, `Is there a PRO version?`), user prompts `what's preline ui?`, `show me the code`, `quiz me about tailwindcss`, `generate 3-dimensional abstract images`, `what's tailwindcss?`, and an assistant `Hold on a sec...` answer embedding a small table.
  - Assistant answers link `Installation Guide` and `Framework Guides` and close with thumbs up/down rate buttons plus `Copy`, `Share`, and `New answer`.
  - Right-aligned outlined follow-up buttons (`border-primary text-primary`) read `What is the use of Tailwind CSS?` and `What is the difference between Tailwind CSS and CSS?`; the final user card says `2 files uploaded` above a 2-item download list (`resume_web_ui_developer.csv`, `coverletter_web_ui_developer.pdf`, each with a `Download` button).
  - Sticky composer (`max-w-4xl mx-auto sticky bottom-0 z-10 bg-layer border-t border-layer-line`): `New chat` and `Stop generating` buttons above a textarea with placeholder `Ask me anything...` and an overlaid toolbar ending in a mic and a primary send button.

<div class="relative h-screen">
        <div class="max-w-4xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
          
          <div class="text-center">
            <div class="mb-4 flex justify-center items-center">
              
              <a class="flex-none rounded-md text-xl inline-block font-semibold focus:outline-hidden focus:opacity-80" href="#" aria-label="Preline">
                <svg class="w-28 h-auto" width="116" height="32" viewBox="0 0 116 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M33.5696 30.8182V11.3182H37.4474V13.7003H37.6229C37.7952 13.3187 38.0445 12.9309 38.3707 12.5369C38.7031 12.1368 39.134 11.8045 39.6634 11.5398C40.1989 11.2689 40.8636 11.1335 41.6577 11.1335C42.6918 11.1335 43.6458 11.4044 44.5199 11.946C45.3939 12.4815 46.0926 13.291 46.6158 14.3743C47.139 15.4515 47.4006 16.8026 47.4006 18.4276C47.4006 20.0095 47.1451 21.3452 46.6342 22.4347C46.1295 23.518 45.4401 24.3397 44.5661 24.8999C43.6982 25.4538 42.7256 25.7308 41.6484 25.7308C40.8852 25.7308 40.2358 25.6046 39.7003 25.3523C39.1709 25.0999 38.737 24.7829 38.3984 24.4013C38.0599 24.0135 37.8014 23.6226 37.6229 23.2287H37.5028V30.8182H33.5696ZM37.4197 18.4091C37.4197 19.2524 37.5367 19.9879 37.7706 20.6158C38.0045 21.2436 38.343 21.733 38.7862 22.0838C39.2294 22.4285 39.768 22.6009 40.402 22.6009C41.0421 22.6009 41.5838 22.4254 42.027 22.0746C42.4702 21.7176 42.8056 21.2251 43.0334 20.5973C43.2673 19.9633 43.3842 19.2339 43.3842 18.4091C43.3842 17.5904 43.2704 16.8703 43.0426 16.2486C42.8149 15.6269 42.4794 15.1406 42.0362 14.7898C41.593 14.4389 41.0483 14.2635 40.402 14.2635C39.7618 14.2635 39.2202 14.4328 38.777 14.7713C38.34 15.1098 38.0045 15.59 37.7706 16.2116C37.5367 16.8333 37.4197 17.5658 37.4197 18.4091ZM49.2427 25.5V11.3182H53.0559V13.7926H53.2037C53.4622 12.9124 53.8961 12.2476 54.5055 11.7983C55.1149 11.3428 55.8166 11.1151 56.6106 11.1151C56.8076 11.1151 57.02 11.1274 57.2477 11.152C57.4754 11.1766 57.6755 11.2105 57.8478 11.2536V14.7436C57.6632 14.6882 57.4077 14.639 57.0815 14.5959C56.7553 14.5528 56.4567 14.5312 56.1859 14.5312C55.6073 14.5312 55.0903 14.6574 54.6348 14.9098C54.1854 15.156 53.8284 15.5007 53.5638 15.9439C53.3052 16.3871 53.176 16.898 53.176 17.4766V25.5H49.2427ZM64.9043 25.777C63.4455 25.777 62.1898 25.4815 61.1373 24.8906C60.0909 24.2936 59.2845 23.4503 58.7182 22.3608C58.1519 21.2652 57.8688 19.9695 57.8688 18.4737C57.8688 17.0149 58.1519 15.7346 58.7182 14.6328C59.2845 13.531 60.0816 12.6723 61.1096 12.0568C62.1437 11.4413 63.3563 11.1335 64.7474 11.1335C65.683 11.1335 66.5539 11.2843 67.3603 11.5859C68.1728 11.8814 68.8806 12.3277 69.4839 12.9247C70.0932 13.5218 70.5672 14.2727 70.9057 15.1776C71.2443 16.0762 71.4135 17.1288 71.4135 18.3352V19.4155H59.4384V16.978H67.7111C67.7111 16.4117 67.588 15.91 67.3418 15.473C67.0956 15.036 66.754 14.6944 66.317 14.4482C65.8861 14.1958 65.3844 14.0696 64.812 14.0696C64.2149 14.0696 63.6856 14.2081 63.2239 14.4851C62.7684 14.7559 62.4114 15.1222 62.1529 15.5838C61.8944 16.0393 61.762 16.5471 61.7559 17.1072V19.4247C61.7559 20.1264 61.8851 20.7327 62.1437 21.2436C62.4083 21.7545 62.7807 22.1484 63.2608 22.4254C63.741 22.7024 64.3103 22.8409 64.9689 22.8409C65.406 22.8409 65.8061 22.7794 66.1692 22.6562C66.5324 22.5331 66.8432 22.3485 67.1018 22.1023C67.3603 21.8561 67.5572 21.5545 67.6927 21.1974L71.3304 21.4375C71.1458 22.3116 70.7672 23.0748 70.1948 23.7273C69.6285 24.3736 68.896 24.8783 67.9974 25.2415C67.1048 25.5985 66.0738 25.777 64.9043 25.777ZM77.1335 6.59091V25.5H73.2003V6.59091H77.1335ZM79.5043 25.5V11.3182H83.4375V25.5H79.5043ZM81.4801 9.49006C80.8954 9.49006 80.3937 9.29616 79.9752 8.90838C79.5628 8.51444 79.3566 8.04356 79.3566 7.49574C79.3566 6.95407 79.5628 6.48935 79.9752 6.10156C80.3937 5.70762 80.8954 5.51065 81.4801 5.51065C82.0649 5.51065 82.5635 5.70762 82.9759 6.10156C83.3944 6.48935 83.6037 6.95407 83.6037 7.49574C83.6037 8.04356 83.3944 8.51444 82.9759 8.90838C82.5635 9.29616 82.0649 9.49006 81.4801 9.49006ZM89.7415 17.3011V25.5H85.8083V11.3182H89.5569V13.8203H89.723C90.037 12.9955 90.5632 12.343 91.3019 11.8629C92.0405 11.3767 92.9361 11.1335 93.9887 11.1335C94.9735 11.1335 95.8322 11.349 96.5647 11.7798C97.2971 12.2107 97.8665 12.8262 98.2728 13.6264C98.679 14.4205 98.8821 15.3684 98.8821 16.4702V25.5H94.9489V17.1719C94.9551 16.304 94.7335 15.6269 94.2841 15.1406C93.8348 14.6482 93.2162 14.402 92.4283 14.402C91.8989 14.402 91.4311 14.5159 91.0249 14.7436C90.6248 14.9714 90.3109 15.3037 90.0831 15.7408C89.8615 16.1716 89.7477 16.6918 89.7415 17.3011ZM107.665 25.777C106.206 25.777 104.951 25.4815 103.898 24.8906C102.852 24.2936 102.045 23.4503 101.479 22.3608C100.913 21.2652 100.63 19.9695 100.63 18.4737C100.63 17.0149 100.913 15.7346 101.479 14.6328C102.045 13.531 102.842 12.6723 103.87 12.0568C104.905 11.4413 106.117 11.1335 107.508 11.1335C108.444 11.1335 109.315 11.2843 110.121 11.5859C110.934 11.8814 111.641 12.3277 112.245 12.9247C112.854 13.5218 113.328 14.2727 113.667 15.1776C114.005 16.0762 114.174 17.1288 114.174 18.3352V19.4155H102.199V16.978H110.472C110.472 16.4117 110.349 15.91 110.103 15.473C109.856 15.036 109.515 14.6944 109.078 14.4482C108.647 14.1958 108.145 14.0696 107.573 14.0696C106.976 14.0696 106.446 14.2081 105.985 14.4851C105.529 14.7559 105.172 15.1222 104.914 15.5838C104.655 16.0393 104.523 16.5471 104.517 17.1072V19.4247C104.517 20.1264 104.646 20.7327 104.905 21.2436C105.169 21.7545 105.542 22.1484 106.022 22.4254C106.502 22.7024 107.071 22.8409 107.73 22.8409C108.167 22.8409 108.567 22.7794 108.93 22.6562C109.293 22.5331 109.604 22.3485 109.863 22.1023C110.121 21.8561 110.318 21.5545 110.454 21.1974L114.091 21.4375C113.907 22.3116 113.528 23.0748 112.956 23.7273C112.389 24.3736 111.657 24.8783 110.758 25.2415C109.866 25.5985 108.835 25.777 107.665 25.777Z" class="fill-primary" fill="currentColor"/>
                  <path d="M1 29.5V16.5C1 9.87258 6.37258 4.5 13 4.5C19.6274 4.5 25 9.87258 25 16.5C25 23.1274 19.6274 28.5 13 28.5H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/>
                  <path d="M5 29.5V16.66C5 12.1534 8.58172 8.5 13 8.5C17.4183 8.5 21 12.1534 21 16.66C21 21.1666 17.4183 24.82 13 24.82H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/>
                  <circle cx="13" cy="16.5214" r="5" class="fill-primary" fill="currentColor"/>
                </svg>
              </a>
              
            </div>

<div class="inline-block bg-layer border border-layer-line rounded-lg p-4 space-y-3">
                <h2 class="font-medium text-foreground">
                  How can we help?
                </h2>
                <div class="space-y-1.5">
                  <p class="mb-1.5 text-sm text-foreground">
                    You can ask questions like:
                  </p>
                  <ul class="list-disc list-outside space-y-1.5 ps-3.5">
                    <li class="text-sm text-foreground">
                      What's Preline UI?
                    </li>

<li class="text-sm text-foreground">
                      How many Starter Pages & Examples are there?
                    </li>

<li class="text-sm text-foreground">
                      Is there a PRO version?
                    </li>
                  </ul>
                </div>
              </div>
              
            </li>

<li class="flex gap-x-2 sm:gap-x-4">
              <svg class="shrink-0 size-9.5 rounded-full" width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="38" height="38" rx="6" fill="currentColor" class="fill-primary"/>
                <path d="M10 28V18.64C10 13.8683 14.0294 10 19 10C23.9706 10 28 13.8683 28 18.64C28 23.4117 23.9706 27.28 19 27.28H18.25" stroke="white" stroke-width="1.5"/>
                <path d="M13 28V18.7552C13 15.5104 15.6863 12.88 19 12.88C22.3137 12.88 25 15.5104 25 18.7552C25 22 22.3137 24.6304 19 24.6304H18.25" stroke="white" stroke-width="1.5"/>
                <ellipse cx="19" cy="18.6554" rx="3.75" ry="3.6" fill="white"/>
              </svg>

<div class="grow max-w-[90%] md:max-w-2xl w-full space-y-3">
                
                <div class="inline-block bg-layer border border-layer-line rounded-lg p-4 space-y-3">
                  <p class="text-sm text-foreground">
                    Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
                  </p>
                  <div class="space-y-1.5">
                    <p class="text-sm text-foreground">
                      Here're some links to get started
                    </p>
                    <ul>
                      <li>
                        <a class="text-sm text-primary decoration-2 hover:underline focus:outline-hidden focus:underline font-medium" href="#">
                          Installation Guide
                        </a>
                      </li>
                      <li>
                        <a class="text-sm text-primary decoration-2 hover:underline focus:outline-hidden focus:underline font-medium" href="#">
                          Framework Guides
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
                
          
                
                <div>
                  <div class="sm:flex sm:justify-between">
                    <div>
                      
                      <div class="inline-flex bg-layer border border-layer-line rounded-full p-0.5">
                        <button type="button" class="inline-flex shrink-0 justify-center items-center size-8 rounded-full text-muted-foreground-1 hover:bg-primary-100 hover:text-primary focus:z-10 focus:outline-hidden focus:bg-primary-100 focus:text-primary dark:hover:bg-primary-500/20 dark:focus:bg-primary-500/20">
                          <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="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z"/></svg>
                        </button>
                        <button type="button" class="inline-flex shrink-0 justify-center items-center size-8 rounded-full text-muted-foreground-1 hover:bg-primary-100 hover:text-primary focus:z-10 focus:outline-hidden focus:bg-primary-100 focus:text-primary dark:hover:bg-primary-500/20 dark:focus:bg-primary-500/20">
                          <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 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z"/></svg>
                        </button>
                      </div>
                      
                      <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm rounded-full border border-transparent text-muted-foreground-1 hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus 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="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z"/></svg>
                        Copy
                      </button>
                      <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm rounded-full border border-transparent text-muted-foreground-1 hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus 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"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                        Share
                      </button>
                    </div>

<li class="max-w-2xl ms-auto flex justify-end gap-x-2 sm:gap-x-4">
              <div class="grow text-end space-y-3">
                
                <div class="inline-block bg-primary rounded-lg p-4 shadow-2xs">
                  <p class="text-sm text-white">
                    what's preline ui figma?
                  </p>
                  <div class="mt-3">
                    <button type="button" class="p-2 inline-flex justify-center items-center gap-x-1 rounded-lg bg-plain/10 border border-transparent font-medium text-foreground-inverse hover:bg-white/20 focus:outline-hidden focus:bg-plain/20 text-xs">
                      <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
                      Voice message
                    </button>
                  </div>
                </div>
                
              </div>

<div class="grow max-w-[90%] md:max-w-2xl w-full space-y-3">
                
                <div class="inline-block bg-layer border border-layer-line rounded-lg p-4 space-y-3">
                  <p class="text-sm text-foreground">
                    Preline UI Figma is the largest free design system for Figma, crafted with Tailwind CSS styles and Preline UI components with extra top-notch additions.
                  </p>
                  <div class="space-y-1.5">
                    <p class="text-sm text-foreground">
                      With the features like:
                    </p>
                    <ul class="list-disc list-outside space-y-1.5 ps-3.5">
                      <li class="text-sm text-foreground">
                        12-column Grid System
                      </li>

<li class="text-sm text-foreground">
                        Easily find UI elements
                      </li>

<li class="text-sm text-foreground">
                        Variants and Properties
                      </li>

<li class="text-sm text-foreground">
                        Tailwind CSS Color styles
                      </li>

<div class="mt-1 sm:mt-0">
                      <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm rounded-full border border-transparent text-muted-foreground-1 hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none">
                        <svg class="size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                          <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
                          <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
                        </svg>
                        New answer
                      </button>
                    </div>
                  </div>
                </div>
                
              </div>
            </li>

<li class="max-w-2xl ms-auto flex justify-end gap-x-2 sm:gap-x-4">
              <div class="grow text-end space-y-3">
                
                <div class="inline-block bg-primary rounded-lg p-4 shadow-2xs">
                  <p class="text-sm text-white">
                    create a table example with preline using avatars, badges and progress bars
                  </p>
                </div>
                
              </div>

<div class="mt-1 sm:mt-0">
                      <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm rounded-full border border-transparent text-muted-foreground-1 hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none">
                        <svg class="size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                          <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
                          <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
                        </svg>
                        New answer
                      </button>
                    </div>
                  </div>
                </div>
                
              </div>
            </li>

<div class="grow max-w-[90%] md:max-w-2xl w-full space-y-3">
                
                <div class="inline-block bg-layer border border-layer-line rounded-lg p-4 space-y-3">
                  <p class="text-sm text-foreground">
                    Sure!
                  </p>
                </div>
                
          
                <div>
                  <button type="button" class="mb-2.5 me-1.5 py-2 px-3 nline-flex justify-center items-center gap-x-2 rounded-lg border border-primary text-primary align-middle hover:bg-primary-50 focus:outline-hidden focus:bg-primary-50 text-sm">
                    Is Tailwind CSS a free library?
                  </button>
                  <button type="button" class="mb-2.5 me-1.5 py-2 px-3 nline-flex justify-center items-center gap-x-2 rounded-lg border border-primary text-primary align-middle hover:bg-primary-50 focus:outline-hidden focus:bg-primary-50 text-sm">
                    What's the latest Tailwind CSS version?
                  </button>
                  <button type="button" class="mb-2.5 me-1.5 py-2 px-3 nline-flex justify-center items-center gap-x-2 rounded-lg border border-primary text-primary align-middle hover:bg-primary-50 focus:outline-hidden focus:bg-primary-50 text-sm">
                    Is it a utility-class based?
                  </button>
                </div>
          
                
                <div>
                  <div class="sm:flex sm:justify-between">
                    <div>
                      
                      <div class="inline-flex bg-layer border border-layer-line rounded-full p-0.5">
                        <button type="button" class="inline-flex shrink-0 justify-center items-center size-8 rounded-full text-muted-foreground-1 hover:bg-primary-100 hover:text-primary focus:z-10 focus:outline-hidden focus:bg-primary-100 focus:text-primary dark:hover:bg-primary-500/20 dark:focus:bg-primary-500/20">
                          <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="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z"/></svg>
                        </button>
                        <button type="button" class="inline-flex shrink-0 justify-center items-center size-8 rounded-full text-muted-foreground-1 hover:bg-primary-100 hover:text-primary focus:z-10 focus:outline-hidden focus:bg-primary-100 focus:text-primary dark:hover:bg-primary-500/20 dark:focus:bg-primary-500/20">
                          <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 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z"/></svg>
                        </button>
                      </div>
                      
                      <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm rounded-full border border-transparent text-muted-foreground-1 hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus 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="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z"/></svg>
                        Copy
                      </button>
                      <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm rounded-full border border-transparent text-muted-foreground-1 hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus 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"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                        Share
                      </button>
                    </div>

<div class="mt-1 sm:mt-0">
                      <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm rounded-full border border-transparent text-muted-foreground-1 hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none">
                        <svg class="size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                          <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
                          <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
                        </svg>
                        New answer
                      </button>
                    </div>
                  </div>
                </div>
                
              </div>
            </li>

<li class="max-w-2xl ms-auto flex justify-end gap-x-2 sm:gap-x-4">
              <div class="grow text-end space-y-3">
                
                <div class="inline-block bg-primary rounded-lg p-4 shadow-2xs">
                  <p class="text-sm text-white">
                    generate 3-dimensional abstract images
                  </p>
                </div>
                
              </div>

<div class="mt-1 sm:mt-0">
                      <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm rounded-full border border-transparent text-muted-foreground-1 hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none">
                        <svg class="size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                          <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
                          <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
                        </svg>
                        New answer
                      </button>
                    </div>
                  </div>
                </div>
                
              </div>
            </li>

<div class="grow max-w-[90%] md:max-w-2xl w-full space-y-3">
                
                <div class="inline-block bg-layer border border-layer-line rounded-lg p-4 space-y-3">
                  <p class="text-sm text-foreground">
                    Tailwind CSS is an open source CSS framework. The main feature of this library is that, unlike other CSS frameworks like Bootstrap, it does not provide a series of predefined classes for elements such as buttons or tables.
                  </p>
                  <div class="space-y-1.5">
                    <ul>
                      <li>
                        <a class="text-sm text-primary decoration-2 hover:underline focus:outline-hidden focus:underline font-medium" href="#">
                          Get started with Tailwind CSS
                        </a>
                      </li>
                      <li>
                        <a class="text-sm text-primary decoration-2 hover:underline focus:outline-hidden focus:underline font-medium" href="#">
                          Tailwind CSS Installation guide
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
                
          
                
                <div>
                  <div class="sm:flex sm:justify-between">
                    <div>
                      
                      <div class="inline-flex bg-layer border border-layer-line rounded-full p-0.5">
                        <button type="button" class="inline-flex shrink-0 justify-center items-center size-8 rounded-full text-muted-foreground-1 hover:bg-primary-100 hover:text-primary focus:z-10 focus:outline-hidden focus:bg-primary-100 focus:text-primary dark:hover:bg-primary-500/20 dark:focus:bg-primary-500/20">
                          <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="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z"/></svg>
                        </button>
                        <button type="button" class="inline-flex shrink-0 justify-center items-center size-8 rounded-full text-muted-foreground-1 hover:bg-primary-100 hover:text-primary focus:z-10 focus:outline-hidden focus:bg-primary-100 focus:text-primary dark:hover:bg-primary-500/20 dark:focus:bg-primary-500/20">
                          <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 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z"/></svg>
                        </button>
                      </div>
                      
                      <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm rounded-full border border-transparent text-muted-foreground-1 hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus 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="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z"/></svg>
                        Copy
                      </button>
                      <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm rounded-full border border-transparent text-muted-foreground-1 hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus 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"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
                        Share
                      </button>
                    </div>

<div class="mt-1 sm:mt-0">
                      <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm rounded-full border border-transparent text-muted-foreground-1 hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none">
                        <svg class="size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                          <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
                          <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
                        </svg>
                        New answer
                      </button>
                    </div>
                  </div>
                </div>
                
              </div>
            </li>

<li class="max-w-2xl ms-auto flex justify-end gap-x-2 sm:gap-x-4">
              <div>
                <div class="text-end">
                  <button type="button" class="mb-2.5 ms-1.5 mb-1.5 py-2 px-3 nline-flex justify-center items-center gap-x-2 rounded-lg border border-primary text-primary align-middle hover:bg-primary-50 focus:outline-hidden focus:bg-primary-50 text-sm">
                    What is the use of Tailwind CSS?
                  </button>
                  <button type="button" class="mb-2.5 ms-1.5 mb-1.5 py-2 px-3 nline-flex justify-center items-center gap-x-2 rounded-lg border border-primary text-primary align-middle hover:bg-primary-50 focus:outline-hidden focus:bg-primary-50 text-sm">
                    What is the difference between Tailwind CSS and CSS?
                  </button>
                </div>
              </div>
            </li>

AI chat page combines a persistent app sidebar with a centered welcome header and an alternating conversation feed.

Create a responsive UI block named "AI Chat Page with Sidebar and Welcome Feed" 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/application-pages/ai-interface-pages/#ai-chat-page-with-sidebar-and-welcome-feed. 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.

Source metadata:
- Catalog family: application-pages/ai-interface-pages
- Block ID: ai-chat-page-with-sidebar-and-welcome-feed
- Source description: AI chat page combines a persistent app sidebar with a centered welcome header and an alternating conversation feed.
- Preview iframe: https://preline.co/blocks/application-pages/ai-interface-pages/iframes/free/ai-chat-page-with-sidebar-and-welcome-feed.html (repo path: blocks/application-pages/ai-interface-pages/iframes/free/ai-chat-page-with-sidebar-and-welcome-feed.html)
- Source markup reference:
  - partials/blocks/sources/pages/ai-with-sidebar.html
  - partials/docs/components/buttons-rate.html
  - partials/docs/components/list-group-example-download.html
  - partials/blocks/sources/pages/ti-chat-format.html

Block-specific fidelity rules:
- Preserve source layout width, wrapper hierarchy, component geometry, responsive order, interaction contents, and exact visible copy.
- Do not replace custom source details with default badges, buttons, cards, placeholders, or unrelated components.
- Source content inventory (from the source markup):
  - Fixed `w-64` sidebar (id `hs-application-sidebar`, HSOverlay `[--auto-close:lg]`, hidden below `lg`, `lg:block lg:translate-x-0`): Preline logo, then links `New chat`, `Preline AI Discord`, `Save conversation`, `Updates & FAQ`, and `Upgrade Plan` (zap icon, gradient text `from-primary to-violet-600`); footer stacks a green-dot status line `Active 12,320 people` and a bordered `Sign in` row.
  - Main pane `relative h-screen w-full lg:ps-64` opens with the centered h1 `Welcome to Preline AI` and subtitle `Your AI-powered copilot for the web`.
  - Feed is a `ul` (`mt-16 space-y-5`) of 17 chat items: assistant items lead with a 38x38 rounded primary Preline mark SVG, user items with a `size-9.5` circle holding initials `AZ`; message text is plain on the page background (no filled bubble cards).
  - Scripted copy includes assistant opener `How can we help?` with sample questions (`What's Preline UI?`, `How many Starter Pages & Examples are there?`, `Is there a PRO version?`), user prompts `what's preline ui?`, `what's preline ui figma?` (with a `Voice message` button), `show me the code`, `quiz me about tailwindcss`, `generate 3-dimensional abstract images`, `what's tailwindcss?`, and an assistant `Hold on a sec...` answer embedding a small table (`Name`/`Status`/`Portfolio`/`Created`).
  - Assistant answers link `Installation Guide` and `Framework Guides` and close with a control row: thumbs up/down rate buttons plus `Copy`, `Share`, and `New answer`.
  - Near the end sit two outlined follow-up buttons (`border-primary text-primary`): `What is the use of Tailwind CSS?` and `What is the difference between Tailwind CSS and CSS?`, then a final user message `2 files uploaded` with a 2-item download list (`resume_web_ui_developer.csv`, `coverletter_web_ui_developer.pdf`, each row ending in a `Download` button).
  - Sticky composer (`sticky bottom-0 z-10 bg-layer border-t border-layer-line`): `New chat` and `Stop generating` buttons above a textarea with placeholder `Ask me anything...` whose overlaid bottom toolbar has two icon buttons on the left and a mic plus primary send button on the right.

<div id="hs-application-sidebar" class="hs-overlay [--auto-close:lg]
      hs-overlay-open:translate-x-0 -translate-x-full duration-300 transform
      hidden
      fixed top-0 inset-s-0 bottom-0 z-60
      w-64 h-full
      bg-sidebar border-e border-sidebar-line
      lg:block lg:translate-x-0 lg:inset-e-auto lg:bottom-0" role="dialog" tabindex="-1" aria-label="Sidebar">
        <nav class="size-full flex flex-col">
          <div class="flex items-center pt-4 pe-4 ps-7">
            
            <a class="flex-none focus:outline-hidden focus:opacity-80" href="#" aria-label="Preline">
              <svg class="w-28 h-auto" width="116" height="32" viewBox="0 0 116 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M33.5696 30.2968V10.7968H37.4474V13.1789H37.6229C37.7952 12.7972 38.0445 12.4094 38.3707 12.0155C38.7031 11.6154 39.134 11.283 39.6634 11.0183C40.1989 10.7475 40.8636 10.6121 41.6577 10.6121C42.6918 10.6121 43.6458 10.8829 44.5199 11.4246C45.3939 11.9601 46.0926 12.7695 46.6158 13.8529C47.139 14.93 47.4006 16.2811 47.4006 17.9061C47.4006 19.488 47.1451 20.8237 46.6342 21.9132C46.1295 22.9966 45.4401 23.8183 44.5661 24.3784C43.6982 24.9324 42.7256 25.2094 41.6484 25.2094C40.8852 25.2094 40.2358 25.0832 39.7003 24.8308C39.1709 24.5785 38.737 24.2615 38.3984 23.8799C38.0599 23.4921 37.8014 23.1012 37.6229 22.7073H37.5028V30.2968H33.5696ZM37.4197 17.8877C37.4197 18.7309 37.5367 19.4665 37.7706 20.0943C38.0045 20.7222 38.343 21.2115 38.7862 21.5624C39.2294 21.9071 39.768 22.0794 40.402 22.0794C41.0421 22.0794 41.5838 21.904 42.027 21.5532C42.4702 21.1961 42.8056 20.7037 43.0334 20.0759C43.2673 19.4419 43.3842 18.7125 43.3842 17.8877C43.3842 17.069 43.2704 16.3488 43.0426 15.7272C42.8149 15.1055 42.4794 14.6192 42.0362 14.2683C41.593 13.9175 41.0483 13.7421 40.402 13.7421C39.7618 13.7421 39.2202 13.9113 38.777 14.2499C38.34 14.5884 38.0045 15.0685 37.7706 15.6902C37.5367 16.3119 37.4197 17.0444 37.4197 17.8877ZM49.2427 24.9786V10.7968H53.0559V13.2712H53.2037C53.4622 12.391 53.8961 11.7262 54.5055 11.2769C55.1149 10.8214 55.8166 10.5936 56.6106 10.5936C56.8076 10.5936 57.02 10.6059 57.2477 10.6306C57.4754 10.6552 57.6755 10.689 57.8478 10.7321V14.2222C57.6632 14.1668 57.4077 14.1175 57.0815 14.0745C56.7553 14.0314 56.4567 14.0098 56.1859 14.0098C55.6073 14.0098 55.0903 14.136 54.6348 14.3884C54.1854 14.6346 53.8284 14.9793 53.5638 15.4225C53.3052 15.8657 53.176 16.3765 53.176 16.9551V24.9786H49.2427ZM64.9043 25.2556C63.4455 25.2556 62.1898 24.9601 61.1373 24.3692C60.0909 23.7721 59.2845 22.9289 58.7182 21.8394C58.1519 20.7437 57.8688 19.448 57.8688 17.9523C57.8688 16.4935 58.1519 15.2132 58.7182 14.1114C59.2845 13.0096 60.0816 12.1509 61.1096 11.5354C62.1437 10.9199 63.3563 10.6121 64.7474 10.6121C65.683 10.6121 66.5539 10.7629 67.3603 11.0645C68.1728 11.36 68.8806 11.8062 69.4839 12.4033C70.0932 13.0004 70.5672 13.7513 70.9057 14.6561C71.2443 15.5548 71.4135 16.6074 71.4135 17.8138V18.8941H59.4384V16.4566H67.7111C67.7111 15.8903 67.588 15.3886 67.3418 14.9516C67.0956 14.5146 66.754 14.1729 66.317 13.9267C65.8861 13.6744 65.3844 13.5482 64.812 13.5482C64.2149 13.5482 63.6856 13.6867 63.2239 13.9637C62.7684 14.2345 62.4114 14.6007 62.1529 15.0624C61.8944 15.5179 61.762 16.0257 61.7559 16.5858V18.9033C61.7559 19.605 61.8851 20.2113 62.1437 20.7222C62.4083 21.2331 62.7807 21.627 63.2608 21.904C63.741 22.181 64.3103 22.3195 64.9689 22.3195C65.406 22.3195 65.8061 22.2579 66.1692 22.1348C66.5324 22.0117 66.8432 21.8271 67.1018 21.5808C67.3603 21.3346 67.5572 21.033 67.6927 20.676L71.3304 20.9161C71.1458 21.7901 70.7672 22.5534 70.1948 23.2058C69.6285 23.8522 68.896 24.3569 67.9974 24.7201C67.1048 25.0771 66.0738 25.2556 64.9043 25.2556ZM77.1335 6.06949V24.9786H73.2003V6.06949H77.1335ZM79.5043 24.9786V10.7968H83.4375V24.9786H79.5043ZM81.4801 8.96863C80.8954 8.96863 80.3937 8.77474 79.9752 8.38696C79.5628 7.99302 79.3566 7.52214 79.3566 6.97431C79.3566 6.43265 79.5628 5.96792 79.9752 5.58014C80.3937 5.1862 80.8954 4.98923 81.4801 4.98923C82.0649 4.98923 82.5635 5.1862 82.9759 5.58014C83.3944 5.96792 83.6037 6.43265 83.6037 6.97431C83.6037 7.52214 83.3944 7.99302 82.9759 8.38696C82.5635 8.77474 82.0649 8.96863 81.4801 8.96863ZM89.7415 16.7797V24.9786H85.8083V10.7968H89.5569V13.2989H89.723C90.037 12.4741 90.5632 11.8216 91.3019 11.3415C92.0405 10.8552 92.9361 10.6121 93.9887 10.6121C94.9735 10.6121 95.8322 10.8275 96.5647 11.2584C97.2971 11.6893 97.8665 12.3048 98.2728 13.105C98.679 13.899 98.8821 14.8469 98.8821 15.9487V24.9786H94.9489V16.6505C94.9551 15.7826 94.7335 15.1055 94.2841 14.6192C93.8348 14.1268 93.2162 13.8806 92.4283 13.8806C91.8989 13.8806 91.4311 13.9944 91.0249 14.2222C90.6248 14.4499 90.3109 14.7823 90.0831 15.2193C89.8615 15.6502 89.7477 16.1703 89.7415 16.7797ZM107.665 25.2556C106.206 25.2556 104.951 24.9601 103.898 24.3692C102.852 23.7721 102.045 22.9289 101.479 21.8394C100.913 20.7437 100.63 19.448 100.63 17.9523C100.63 16.4935 100.913 15.2132 101.479 14.1114C102.045 13.0096 102.842 12.1509 103.87 11.5354C104.905 10.9199 106.117 10.6121 107.508 10.6121C108.444 10.6121 109.315 10.7629 110.121 11.0645C110.934 11.36 111.641 11.8062 112.245 12.4033C112.854 13.0004 113.328 13.7513 113.667 14.6561C114.005 15.5548 114.174 16.6074 114.174 17.8138V18.8941H102.199V16.4566H110.472C110.472 15.8903 110.349 15.3886 110.103 14.9516C109.856 14.5146 109.515 14.1729 109.078 13.9267C108.647 13.6744 108.145 13.5482 107.573 13.5482C106.976 13.5482 106.446 13.6867 105.985 13.9637C105.529 14.2345 105.172 14.6007 104.914 15.0624C104.655 15.5179 104.523 16.0257 104.517 16.5858V18.9033C104.517 19.605 104.646 20.2113 104.905 20.7222C105.169 21.2331 105.542 21.627 106.022 21.904C106.502 22.181 107.071 22.3195 107.73 22.3195C108.167 22.3195 108.567 22.2579 108.93 22.1348C109.293 22.0117 109.604 21.8271 109.863 21.5808C110.121 21.3346 110.318 21.033 110.454 20.676L114.091 20.9161C113.907 21.7901 113.528 22.5534 112.956 23.2058C112.389 23.8522 111.657 24.3569 110.758 24.7201C109.866 25.0771 108.835 25.2556 107.665 25.2556Z" fill="currentColor" class="fill-primary"/>
                <path d="M1 28.9786V15.9786C1 9.35116 6.37258 3.97858 13 3.97858C19.6274 3.97858 25 9.35116 25 15.9786C25 22.606 19.6274 27.9786 13 27.9786H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/>
                <path d="M5 28.9786V16.1386C5 11.6319 8.58172 7.97858 13 7.97858C17.4183 7.97858 21 11.6319 21 16.1386C21 20.6452 17.4183 24.2986 13 24.2986H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/>
                <circle cx="13" cy="16" r="5" fill="currentColor" class="fill-primary"/>
              </svg>
            </a>
            
          </div>

<div class="h-full overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
            
            <ul class="space-y-1.5 p-4">
              <li>
                <a class="flex items-center gap-x-3 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
                  <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="M5 12h14"/><path d="M12 5v14"/></svg>
                  New chat
                </a>
              </li>
              <li>
                <a class="flex items-center gap-x-3 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
                  <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="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"/>
                  </svg>
                  Preline AI Discord
                </a>
              </li>
              <li>
                <a class="flex items-center gap-x-3 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
                <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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
                  Save conversation
                </a>
              </li>
              <li>
                <a class="flex items-center gap-x-3 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
                  <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="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></svg>
                  Updates & FAQ
                </a>
              </li>
              <li>
                <a class="flex items-center gap-x-3 py-2 px-3 text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
                <svg class="shrink-0 size-4 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
                  <span class="bg-clip-text bg-linear-to-tl from-primary to-violet-600 text-transparent">Upgrade Plan</span>
                </a>
              </li>
            </ul>
            
          </div>

<div class="mt-auto">
            <div class="py-2.5 px-7">
              <p class="inline-flex items-center gap-x-2 text-xs text-green-600">
                <span class="block size-1.5 rounded-full bg-green-600"></span>
                Active 12,320 people
              </p>
            </div>

<div class="relative h-screen w-full lg:ps-64">
        <div class="py-10 lg:py-14">
          
          <div class="max-w-4xl px-4 sm:px-6 lg:px-8 mx-auto text-center">
            <h1 class="text-3xl font-bold text-foreground sm:text-4xl">
              Welcome to Preline AI
            </h1>
            <p class="mt-3 text-muted-foreground-2">
              Your AI-powered copilot for the web
            </p>
          </div>

<li class="text-sm text-foreground">
                      How many Starter Pages & Examples are there?
                    </li>

<li class="text-sm text-foreground">
                        Easily find UI elements
                      </li>

<li class="text-sm text-foreground">
                        Variants and Properties
                      </li>

<li class="text-sm text-foreground">
                        Tailwind CSS Color styles
                      </li>

<div class="grow mt-2 space-y-3">
                    <p class="text-foreground">
                      2 files uploaded
                    </p>

Centered AI Welcome Page with Prompt Composer Free

Centered AI welcome page focuses on a large hero title and a prompt composer with upload and voice actions.

Create a responsive UI block named "Centered AI Welcome Page with Prompt Composer" 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/application-pages/ai-interface-pages/#centered-ai-welcome-page-with-prompt-composer. 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.

Source metadata:
- Catalog family: application-pages/ai-interface-pages
- Block ID: centered-ai-welcome-page-with-prompt-composer
- Source description: Centered AI welcome page focuses on a large hero title and a prompt composer with upload and voice actions.
- Preview iframe: https://preline.co/blocks/application-pages/ai-interface-pages/iframes/free/centered-ai-welcome-page-with-prompt-composer.html (repo path: blocks/application-pages/ai-interface-pages/iframes/free/centered-ai-welcome-page-with-prompt-composer.html)
- Source markup reference:
  - partials/blocks/sources/pages/ai-welcome-page.html
  - partials/pro/logos/logo.html
  - partials/footers/copyright.html

<div class="h-screen flex flex-col pb-6">
        <div class="h-full flex flex-col justify-center">
          <div class="-mt-20 max-w-4xl w-full text-center mx-auto px-4 sm:px-6 lg:px-8">
            <div class="mb-4 flex justify-center items-center">
              
              <a class="flex-none rounded-md text-xl inline-block font-semibold focus:outline-hidden focus:opacity-80" href="#" aria-label="Preline">
                <svg class="w-28 h-auto" width="116" height="32" viewBox="0 0 116 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M33.5696 30.8182V11.3182H37.4474V13.7003H37.6229C37.7952 13.3187 38.0445 12.9309 38.3707 12.5369C38.7031 12.1368 39.134 11.8045 39.6634 11.5398C40.1989 11.2689 40.8636 11.1335 41.6577 11.1335C42.6918 11.1335 43.6458 11.4044 44.5199 11.946C45.3939 12.4815 46.0926 13.291 46.6158 14.3743C47.139 15.4515 47.4006 16.8026 47.4006 18.4276C47.4006 20.0095 47.1451 21.3452 46.6342 22.4347C46.1295 23.518 45.4401 24.3397 44.5661 24.8999C43.6982 25.4538 42.7256 25.7308 41.6484 25.7308C40.8852 25.7308 40.2358 25.6046 39.7003 25.3523C39.1709 25.0999 38.737 24.7829 38.3984 24.4013C38.0599 24.0135 37.8014 23.6226 37.6229 23.2287H37.5028V30.8182H33.5696ZM37.4197 18.4091C37.4197 19.2524 37.5367 19.9879 37.7706 20.6158C38.0045 21.2436 38.343 21.733 38.7862 22.0838C39.2294 22.4285 39.768 22.6009 40.402 22.6009C41.0421 22.6009 41.5838 22.4254 42.027 22.0746C42.4702 21.7176 42.8056 21.2251 43.0334 20.5973C43.2673 19.9633 43.3842 19.2339 43.3842 18.4091C43.3842 17.5904 43.2704 16.8703 43.0426 16.2486C42.8149 15.6269 42.4794 15.1406 42.0362 14.7898C41.593 14.4389 41.0483 14.2635 40.402 14.2635C39.7618 14.2635 39.2202 14.4328 38.777 14.7713C38.34 15.1098 38.0045 15.59 37.7706 16.2116C37.5367 16.8333 37.4197 17.5658 37.4197 18.4091ZM49.2427 25.5V11.3182H53.0559V13.7926H53.2037C53.4622 12.9124 53.8961 12.2476 54.5055 11.7983C55.1149 11.3428 55.8166 11.1151 56.6106 11.1151C56.8076 11.1151 57.02 11.1274 57.2477 11.152C57.4754 11.1766 57.6755 11.2105 57.8478 11.2536V14.7436C57.6632 14.6882 57.4077 14.639 57.0815 14.5959C56.7553 14.5528 56.4567 14.5312 56.1859 14.5312C55.6073 14.5312 55.0903 14.6574 54.6348 14.9098C54.1854 15.156 53.8284 15.5007 53.5638 15.9439C53.3052 16.3871 53.176 16.898 53.176 17.4766V25.5H49.2427ZM64.9043 25.777C63.4455 25.777 62.1898 25.4815 61.1373 24.8906C60.0909 24.2936 59.2845 23.4503 58.7182 22.3608C58.1519 21.2652 57.8688 19.9695 57.8688 18.4737C57.8688 17.0149 58.1519 15.7346 58.7182 14.6328C59.2845 13.531 60.0816 12.6723 61.1096 12.0568C62.1437 11.4413 63.3563 11.1335 64.7474 11.1335C65.683 11.1335 66.5539 11.2843 67.3603 11.5859C68.1728 11.8814 68.8806 12.3277 69.4839 12.9247C70.0932 13.5218 70.5672 14.2727 70.9057 15.1776C71.2443 16.0762 71.4135 17.1288 71.4135 18.3352V19.4155H59.4384V16.978H67.7111C67.7111 16.4117 67.588 15.91 67.3418 15.473C67.0956 15.036 66.754 14.6944 66.317 14.4482C65.8861 14.1958 65.3844 14.0696 64.812 14.0696C64.2149 14.0696 63.6856 14.2081 63.2239 14.4851C62.7684 14.7559 62.4114 15.1222 62.1529 15.5838C61.8944 16.0393 61.762 16.5471 61.7559 17.1072V19.4247C61.7559 20.1264 61.8851 20.7327 62.1437 21.2436C62.4083 21.7545 62.7807 22.1484 63.2608 22.4254C63.741 22.7024 64.3103 22.8409 64.9689 22.8409C65.406 22.8409 65.8061 22.7794 66.1692 22.6562C66.5324 22.5331 66.8432 22.3485 67.1018 22.1023C67.3603 21.8561 67.5572 21.5545 67.6927 21.1974L71.3304 21.4375C71.1458 22.3116 70.7672 23.0748 70.1948 23.7273C69.6285 24.3736 68.896 24.8783 67.9974 25.2415C67.1048 25.5985 66.0738 25.777 64.9043 25.777ZM77.1335 6.59091V25.5H73.2003V6.59091H77.1335ZM79.5043 25.5V11.3182H83.4375V25.5H79.5043ZM81.4801 9.49006C80.8954 9.49006 80.3937 9.29616 79.9752 8.90838C79.5628 8.51444 79.3566 8.04356 79.3566 7.49574C79.3566 6.95407 79.5628 6.48935 79.9752 6.10156C80.3937 5.70762 80.8954 5.51065 81.4801 5.51065C82.0649 5.51065 82.5635 5.70762 82.9759 6.10156C83.3944 6.48935 83.6037 6.95407 83.6037 7.49574C83.6037 8.04356 83.3944 8.51444 82.9759 8.90838C82.5635 9.29616 82.0649 9.49006 81.4801 9.49006ZM89.7415 17.3011V25.5H85.8083V11.3182H89.5569V13.8203H89.723C90.037 12.9955 90.5632 12.343 91.3019 11.8629C92.0405 11.3767 92.9361 11.1335 93.9887 11.1335C94.9735 11.1335 95.8322 11.349 96.5647 11.7798C97.2971 12.2107 97.8665 12.8262 98.2728 13.6264C98.679 14.4205 98.8821 15.3684 98.8821 16.4702V25.5H94.9489V17.1719C94.9551 16.304 94.7335 15.6269 94.2841 15.1406C93.8348 14.6482 93.2162 14.402 92.4283 14.402C91.8989 14.402 91.4311 14.5159 91.0249 14.7436C90.6248 14.9714 90.3109 15.3037 90.0831 15.7408C89.8615 16.1716 89.7477 16.6918 89.7415 17.3011ZM107.665 25.777C106.206 25.777 104.951 25.4815 103.898 24.8906C102.852 24.2936 102.045 23.4503 101.479 22.3608C100.913 21.2652 100.63 19.9695 100.63 18.4737C100.63 17.0149 100.913 15.7346 101.479 14.6328C102.045 13.531 102.842 12.6723 103.87 12.0568C104.905 11.4413 106.117 11.1335 107.508 11.1335C108.444 11.1335 109.315 11.2843 110.121 11.5859C110.934 11.8814 111.641 12.3277 112.245 12.9247C112.854 13.5218 113.328 14.2727 113.667 15.1776C114.005 16.0762 114.174 17.1288 114.174 18.3352V19.4155H102.199V16.978H110.472C110.472 16.4117 110.349 15.91 110.103 15.473C109.856 15.036 109.515 14.6944 109.078 14.4482C108.647 14.1958 108.145 14.0696 107.573 14.0696C106.976 14.0696 106.446 14.2081 105.985 14.4851C105.529 14.7559 105.172 15.1222 104.914 15.5838C104.655 16.0393 104.523 16.5471 104.517 17.1072V19.4247C104.517 20.1264 104.646 20.7327 104.905 21.2436C105.169 21.7545 105.542 22.1484 106.022 22.4254C106.502 22.7024 107.071 22.8409 107.73 22.8409C108.167 22.8409 108.567 22.7794 108.93 22.6562C109.293 22.5331 109.604 22.3485 109.863 22.1023C110.121 21.8561 110.318 21.5545 110.454 21.1974L114.091 21.4375C113.907 22.3116 113.528 23.0748 112.956 23.7273C112.389 24.3736 111.657 24.8783 110.758 25.2415C109.866 25.5985 108.835 25.777 107.665 25.777Z" class="fill-primary" fill="currentColor"/>
                  <path d="M1 29.5V16.5C1 9.87258 6.37258 4.5 13 4.5C19.6274 4.5 25 9.87258 25 16.5C25 23.1274 19.6274 28.5 13 28.5H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/>
                  <path d="M5 29.5V16.66C5 12.1534 8.58172 8.5 13 8.5C17.4183 8.5 21 12.1534 21 16.66C21 21.1666 17.4183 24.82 13 24.82H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/>
                  <circle cx="13" cy="16.5214" r="5" class="fill-primary" fill="currentColor"/>
                </svg>
              </a>
              
            </div>

<div class="mt-10 max-w-2xl w-full mx-auto px-4 sm:px-6 lg:px-8">
            <div class="relative">
              <input type="text" class="p-3 sm:p-4 block w-full bg-layer border-layer-line rounded-full sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="Ask me anything...">
              <div class="absolute top-1/2 inset-e-2 -translate-y-1/2">
                <button type="button" class="size-10 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-muted-foreground-1 hover:text-foreground focus:outline-hidden focus:text-foreground 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="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M12 12v9"/><path d="m16 16-4-4-4 4"/></svg>
                </button>
                <button type="button" class="size-10 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-muted-foreground-1 hover:text-foreground focus:outline-hidden focus:text-foreground bg-surface 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="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>
              </div>
            </div>
          </div>
          
        </div>

<footer class="mt-auto max-w-4xl text-center mx-auto px-4 sm:px-6 lg:px-8">
          <p class="text-xs text-muted-foreground-2">© 2026 Preline Labs.</p>
        </footer>
      </div>

AI Interface Pages

Centered AI Conversation Page with Carded Chat Bubbles Free

Centered AI Chat Page with Alternating Chat Bubbles Free

AI Chat Page with Sidebar and Welcome Feed Free

Centered AI Welcome Page with Prompt Composer Free