Tailwind CSS Cookie Consent Prompts Blocks

All Blocks
Application UI
Feedback & States
Cookie Consent Prompts

Cookie Consent Prompts

Policy copy, consent controls, category toggles, and preference details arranged as inline bars, bottom rails, floating cards, fixed panels, and a modal dialog.

Cookie icon, short policy copy, privacy link, and paired accept and decline controls in a slim horizontal banner.

Create a responsive UI block named "Inline Cookie Consent Banner with Icon and Action Buttons" 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/feedback-states/cookie-consent-prompts/#inline-cookie-consent-banner-with-icon-and-action-buttons. 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: feedback-states/cookie-consent-prompts
- Block ID: inline-cookie-consent-banner-with-icon-and-action-buttons
- Source description: Cookie icon, short policy copy, privacy link, and paired accept and decline controls in a slim horizontal banner.
- Preview iframe: https://preline.co/blocks/feedback-states/cookie-consent-prompts/iframes/free/inline-cookie-consent-banner-with-icon-and-action-buttons.html (repo path: blocks/feedback-states/cookie-consent-prompts/iframes/free/inline-cookie-consent-banner-with-icon-and-action-buttons.html)
- Source markup reference:
  - partials/blocks/sources/pages/cookies-inline-with-icon-and-buttons.html
  - scripts/js/open-overlay-on-init.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.

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="grow">
                          <h2 class="text-lg font-semibold text-foreground">
                            We are using cookies to improve your experience!
                          </h2>
                          <p class="mt-2 text-sm text-muted-foreground-2">
                            By clicking "Allow all", you agree to use of all cookies. Visit our <a class="inline-flex items-center gap-x-1.5 text-primary decoration-2 hover:underline focus:outline-hidden focus:underline font-medium" href="#">Cookies Policy</a> to learn more.
                          </p>
                          <div class="mt-5 inline-flex gap-x-2">
                            <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                              Allow all
                            </button>
                            <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm 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">
                              Manage cookies
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                    
                  </div>

Centered policy copy, privacy link, and evenly weighted accept and decline controls in a clean inline row.

Create a responsive UI block named "Inline Cookie Consent Banner with Action Buttons" 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/feedback-states/cookie-consent-prompts/#inline-cookie-consent-banner-with-action-buttons. 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: feedback-states/cookie-consent-prompts
- Block ID: inline-cookie-consent-banner-with-action-buttons
- Source description: Centered policy copy, privacy link, and evenly weighted accept and decline controls in a clean inline row.
- Preview iframe: https://preline.co/blocks/feedback-states/cookie-consent-prompts/iframes/free/inline-cookie-consent-banner-with-action-buttons.html (repo path: blocks/feedback-states/cookie-consent-prompts/iframes/free/inline-cookie-consent-banner-with-action-buttons.html)
- Source markup reference:
  - partials/blocks/sources/pages/cookies-inline-with-buttons.html
  - scripts/js/open-overlay-on-init.html

<div class="fixed bottom-0 inset-e-0 z-60 sm:max-w-xl w-full mx-auto p-6">
                    
                    <div class="p-4 bg-layer border border-layer-line rounded-xl shadow-2xs">
                      <div class="flex flex-col sm:flex-row sm:items-center gap-y-3 sm:gap-y-0 sm:gap-x-5">
                        <div class="grow">
                          <h2 class="text-muted-foreground-1">
                            <span class="font-semibold text-foreground">We use cookies</span> to analyze our traffic and create a smooth user experience.
                          </h2>
                        </div>
                        <div class="inline-flex gap-x-2">
                          <div>
                            <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm 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">
                              Reject
                            </button>
                          </div>
                          <div>
                            <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                              Accept
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                    
                  </div>

Short disclosure text and a single dismiss control in a low-profile horizontal notice.

Create a responsive UI block named "Simple Cookie Consent Banner with Dismiss Button" 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/feedback-states/cookie-consent-prompts/#simple-cookie-consent-banner-with-dismiss-button. 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: feedback-states/cookie-consent-prompts
- Block ID: simple-cookie-consent-banner-with-dismiss-button
- Source description: Short disclosure text and a single dismiss control in a low-profile horizontal notice.
- Preview iframe: https://preline.co/blocks/feedback-states/cookie-consent-prompts/iframes/free/simple-cookie-consent-banner-with-dismiss-button.html (repo path: blocks/feedback-states/cookie-consent-prompts/iframes/free/simple-cookie-consent-banner-with-dismiss-button.html)
- Source markup reference:
  - partials/blocks/sources/pages/cookies-simple-with-dismiss-button.html
  - scripts/js/open-overlay-on-init.html

<div id="cookies-simple-with-dismiss-button" class="fixed bottom-0 inset-s-1/2 transform -translate-x-1/2 z-60 sm:max-w-4xl w-full mx-auto p-6">
                    
                    <div class="p-4 bg-layer border border-layer-line rounded-xl shadow-2xs">
                      <div class="flex justify-between items-center gap-x-5 sm:gap-x-10">
                        <div class="grow">
                          <h2 class="text-sm text-muted-foreground-2">
                            By continuing to use this site you consent to the use of cookies in accordance with our <a class="inline-flex items-center gap-x-1.5 text-primary decoration-2 hover:underline focus:outline-hidden focus:underline font-medium" href="#">Cookies Policy.</a>
                          </h2>
                        </div>
                        <button type="button" class="p-2 inline-flex items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent bg-surface text-surface-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-remove-element="#cookies-simple-with-dismiss-button">
                          <span class="sr-only">Dismiss</span>
                          <svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
                        </button>
                      </div>
                    </div>
                    
                  </div>

Blurred corner card with condensed policy text and vertically stacked consent controls.

Create a responsive UI block named "Blurred Cookie Consent Panel with Stacked Buttons" 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/feedback-states/cookie-consent-prompts/#blurred-cookie-consent-panel-with-stacked-buttons. 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: feedback-states/cookie-consent-prompts
- Block ID: blurred-cookie-consent-panel-with-stacked-buttons
- Source description: Blurred corner card with condensed policy text and vertically stacked consent controls.
- Preview iframe: https://preline.co/blocks/feedback-states/cookie-consent-prompts/iframes/free/blurred-cookie-consent-panel-with-stacked-buttons.html (repo path: blocks/feedback-states/cookie-consent-prompts/iframes/free/blurred-cookie-consent-panel-with-stacked-buttons.html)
- Source markup reference:
  - partials/blocks/sources/pages/cookies-blurred-bg-with-stacked-buttons.html
  - scripts/js/open-overlay-on-init.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):
  - Wrapper is `<div id="cookies-with-stacked-buttons" class="fixed bottom-0 inset-e-0 z-60 sm:max-w-sm w-full mx-auto p-6">` and the card inside is `p-4 bg-layer/60 backdrop-blur-lg rounded-xl shadow-2xl` - the translucent tint plus backdrop blur is the defining detail.
  - Copy is heading `Cookie Settings` plus one paragraph: `We use cookies to improve your experience and for marketing. Visit our Cookies Policy to learn more.`, where `Cookies Policy` is an inline primary-colored link.
  - Exactly three action buttons in order: `Allow all` and `Reject all` sit side by side as two equal `grid w-full` cells in a `flex gap-x-2` row and are BOTH primary-filled; below them one full-width `Manage cookies` button (layer/outline, `py-3 px-4`).
  - Top-right dismiss control is an icon-only round button (`rounded-full p-2`) with `sr-only` text `Dismiss` and a size-4 X icon, wired `data-hs-remove-element="#cookies-with-stacked-buttons"` - it needs the Preline core runtime to remove the panel.
  - A decorative 273x250 SVG (`-z-1 absolute bottom-0 inset-e-0`) is a sibling of the panel, not a child: concentric rings, a triangle and a quarter-disc drawn with hardcoded hex fills `#3B82F6`, `#1D4ED8`, `#1E40AF`.
  - The panel renders inline and visible on first load - it is not an HSOverlay/modal and has no trigger beyond the dismiss button.

<div id="cookies-with-stacked-buttons" class="fixed bottom-0 inset-e-0 z-60 sm:max-w-sm w-full mx-auto p-6">
                    
                    <div class="p-4 bg-layer/60 backdrop-blur-lg rounded-xl shadow-2xl">
                      <div class="flex justify-between gap-x-5">
                        <div class="grow">
                          <h2 class="font-semibold text-foreground">
                            Cookie Settings
                          </h2>
                        </div>
                        <button type="button" class="inline-flex rounded-full p-2 text-muted-foreground-1 hover:bg-plain focus:outline-hidden focus:bg-plain" data-hs-remove-element="#cookies-with-stacked-buttons">
                          <span class="sr-only">Dismiss</span>
                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
                        </button>
                      </div>
                      <p class="mt-2 text-sm text-foreground">
                        We use cookies to improve your experience and for marketing. Visit our <a class="inline-flex items-center gap-x-1.5 text-primary decoration-2 hover:underline focus:outline-hidden focus:underline font-medium" href="#">Cookies Policy</a> to learn more.
                      </p>
                      <div class="mt-5 mb-2 w-full flex gap-x-2">
                        <div class="grid w-full">
                          <button type="button" class="py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                            Allow all
                          </button>
                        </div>
                        <div class="grid w-full">
                          <button type="button" class="py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                            Reject all
                          </button>
                        </div>
                      </div>
                      <div class="grid w-full">
                        <button type="button" class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm 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">
                          Manage cookies
                        </button>
                      </div>
                    </div>
                    
                  </div>

Brand mark, centered consent copy, and three decision buttons stretched across a wide bottom rail.

Create a responsive UI block named "Full-Width Cookie Consent Banner with Centered Content" 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/feedback-states/cookie-consent-prompts/#full-width-cookie-consent-banner-with-centered-content. 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: feedback-states/cookie-consent-prompts
- Block ID: full-width-cookie-consent-banner-with-centered-content
- Source description: Brand mark, centered consent copy, and three decision buttons stretched across a wide bottom rail.
- Preview iframe: https://preline.co/blocks/feedback-states/cookie-consent-prompts/iframes/free/full-width-cookie-consent-banner-with-centered-content.html (repo path: blocks/feedback-states/cookie-consent-prompts/iframes/free/full-width-cookie-consent-banner-with-centered-content.html)
- Source markup reference:
  - partials/blocks/sources/pages/cookies-fullwidth-centered-content.html
  - scripts/js/open-overlay-on-init.html

<div class="fixed bottom-0 z-60 inset-x-0">
                    
                    <div class="p-4 bg-layer border border-layer-line shadow-2xs">
                      <div class="max-w-sm w-full mx-auto">
                        <h2 class="font-semibold text-foreground">
                          Cookie Settings
                        </h2>
                        <p class="mt-2 text-sm text-muted-foreground-2">
                          We use cookies to improve your experience and for marketing. Visit our <a class="inline-flex items-center gap-x-1.5 text-primary decoration-2 hover:underline focus:outline-hidden focus:underline font-medium" href="#">Cookies Policy</a> to learn more.
                        </p>
      
                        <div class="mt-5 inline-flex gap-x-2">
                          <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                            Agree
                          </button>
                          <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm 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">
                            Reject
                          </button>
                        </div>
                      </div>
                    </div>
                    
                  </div>

Consent summary, category toggles, and final decision buttons gathered into a full-width preferences bar.

Create a responsive UI block named "Full-Width Cookie Preferences Banner with Toggle Switches" 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/feedback-states/cookie-consent-prompts/#full-width-cookie-preferences-banner-with-toggle-switches. 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: feedback-states/cookie-consent-prompts
- Block ID: full-width-cookie-preferences-banner-with-toggle-switches
- Source description: Consent summary, category toggles, and final decision buttons gathered into a full-width preferences bar.
- Preview iframe: https://preline.co/blocks/feedback-states/cookie-consent-prompts/iframes/free/full-width-cookie-preferences-banner-with-toggle-switches.html (repo path: blocks/feedback-states/cookie-consent-prompts/iframes/free/full-width-cookie-preferences-banner-with-toggle-switches.html)
- Source markup reference:
  - partials/blocks/sources/pages/cookies-full-width-with-switchers.html
  - scripts/js/open-overlay-on-init.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):
  - Wrapper is `fixed bottom-0 z-60 inset-x-0`, bar is `p-4 sm:p-6 bg-layer border border-layer-line shadow-2xs`, inner container is `max-w-340 mx-auto`, and the layout is `grid lg:grid-cols-4 xl:grid-cols-5 gap-5 items-center`.
  - Three columns in order: the Preline wordmark SVG (116x32 viewBox, rendered `w-32 md:w-40`) inside a home link; a `lg:col-span-3` text column; then a button column `col-span-full col-start-2 xl:col-start-5 xl:col-span-1`.
  - Text column has heading `We use cookies` (`text-lg font-semibold`) and one long paragraph starting `We use cookies to personalise content and ads, to provide social media features and to analyse our traffic.` that uses curly apostrophes (`you’ve`, `they’ve`) and British spellings.
  - Exactly four toggle switches in order `Necessary`, `Preferences`, `Statistics`, `Marketing` (input ids `hs-cookies-necessary`, `hs-cookies-preferences`, `hs-cookies-statistics`, `hs-cookies-marketing`); only `Necessary` carries `checked` on first load.
  - Switches are pure CSS peer-checked, not a JS plugin: `w-11 h-6` track, `size-5` thumb, `peer-checked:bg-primary-checked` and `peer-checked:translate-x-full`; the label renders before the switch on mobile and is moved after it on desktop via `md:order-2`.
  - Button column has exactly three buttons in a `grid sm:grid-cols-3 xl:grid-cols-1`, in order `Allow all` (primary filled), `Allow selection` (primary outline, transparent fill), `Reject all` (layer/outline).
  - No dismiss X and no policy link; fully static with no Preline JS plugins or data-hs-* attributes.

<div class="lg:col-span-3">
                            <h2 class="text-lg font-semibold text-foreground">
                              We use cookies
                            </h2>
                            <p class="mt-2 text-sm text-muted-foreground-2">
                              We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.
                            </p>
                            <div class="mt-5 flex flex-col md:flex-row md:items-center gap-3">
                              <div class="flex items-center justify-between md:justify-start w-full">
                                <label for="hs-cookies-necessary" class="md:order-2 text-sm text-muted-foreground-1 md:ms-3">Necessary</label>
                                <label for="hs-cookies-necessary" class="relative inline-block w-11 h-6 cursor-pointer">
                                  <input type="checkbox" id="hs-cookies-necessary" class="peer sr-only" checked>
                                  <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                                  <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-5 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                                </label>
                              </div>

<div class="flex items-center justify-between md:justify-start w-full">
                                <label for="hs-cookies-preferences" class="md:order-2 text-sm text-muted-foreground-1 md:ms-3">Preferences</label>
                                <label for="hs-cookies-preferences" class="relative inline-block w-11 h-6 cursor-pointer">
                                  <input type="checkbox" id="hs-cookies-preferences" class="peer sr-only">
                                  <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                                  <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-5 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                                </label>
                              </div>
            
                              <div class="flex items-center justify-between md:justify-start w-full">
                                <label for="hs-cookies-statistics" class="md:order-2 text-sm text-muted-foreground-1 md:ms-3">Statistics</label>
                                <label for="hs-cookies-statistics" class="relative inline-block w-11 h-6 cursor-pointer">
                                  <input type="checkbox" id="hs-cookies-statistics" class="peer sr-only">
                                  <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                                  <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-5 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                                </label>
                              </div>
            
                              <div class="flex items-center justify-between md:justify-start w-full">
                                <label for="hs-cookies-marketing" class="md:order-2 text-sm text-muted-foreground-1 md:ms-3">Marketing</label>
                                <label for="hs-cookies-marketing" class="relative inline-block w-11 h-6 cursor-pointer">
                                  <input type="checkbox" id="hs-cookies-marketing" class="peer sr-only">
                                  <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                                  <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-5 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                                </label>
                              </div>
                            </div>
                          </div>

<div class="col-span-full col-start-2 xl:col-start-5 xl:col-span-1">
                            <div class="grid sm:grid-cols-3 xl:grid-cols-1 gap-y-2 sm:gap-y-0 sm:gap-x-5 xl:gap-y-2 xl:gap-x-0">
                              <button type="button" class="py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                Allow all
                              </button>
                              <button type="button" class="py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-primary text-primary hover:border-primary-hover hover:text-primary-hover focus:outline-hidden focus:border-primary-focus focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                Allow selection
                              </button>
                              <button type="button" class="py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm 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">
                                Reject all
                              </button>
                            </div>
                          </div>
                          
                        </div>
                      </div>
                    </div>
                    
                  </div>

Compact side card with an icon, brief privacy copy, and a single dismiss action.

Create a responsive UI block named "Simple Cookie Consent Banner with Icon and Dismiss Button" 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/feedback-states/cookie-consent-prompts/#simple-cookie-consent-banner-with-icon-and-dismiss-button. 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: feedback-states/cookie-consent-prompts
- Block ID: simple-cookie-consent-banner-with-icon-and-dismiss-button
- Source description: Compact side card with an icon, brief privacy copy, and a single dismiss action.
- Preview iframe: https://preline.co/blocks/feedback-states/cookie-consent-prompts/iframes/free/simple-cookie-consent-banner-with-icon-and-dismiss-button.html (repo path: blocks/feedback-states/cookie-consent-prompts/iframes/free/simple-cookie-consent-banner-with-icon-and-dismiss-button.html)
- Source markup reference:
  - partials/blocks/sources/pages/cookies-simple-with-icon-and-dismiss-button.html
  - scripts/js/open-overlay-on-init.html

<div class="grow">
                          <p class="text-sm text-foreground">
                            By browsing this website, you accept our <a class="inline-flex items-center gap-x-1.5 text-primary decoration-2 hover:underline focus:outline-hidden focus:underline font-medium" href="#">Cookies Policy</a>
                          </p>
                        </div>

<div>
                          <button type="button" class="p-2 inline-flex items-center gap-x-2 text-sm font-semibold 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" data-hs-remove-element="#cookies-simple-with-icon-and-dismiss-button">
                            <span class="sr-only">Dismiss</span>
                            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
                          </button>
                        </div>
                      </div>
                    </div>
                    
                  </div>

Centered consent card with short copy, a privacy link, and action buttons over a gradient backdrop.

Create a responsive UI block named "Cookie Consent Banner on Gradient Background" 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/feedback-states/cookie-consent-prompts/#cookie-consent-banner-on-gradient-background. 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: feedback-states/cookie-consent-prompts
- Block ID: cookie-consent-banner-on-gradient-background
- Source description: Centered consent card with short copy, a privacy link, and action buttons over a gradient backdrop.
- Preview iframe: https://preline.co/blocks/feedback-states/cookie-consent-prompts/iframes/free/cookie-consent-banner-on-gradient-background.html (repo path: blocks/feedback-states/cookie-consent-prompts/iframes/free/cookie-consent-banner-on-gradient-background.html)
- Source markup reference:
  - partials/blocks/sources/pages/cookies-on-gradient-bg.html
  - scripts/js/open-overlay-on-init.html

<div class="fixed bottom-0 inset-e-0 z-60 sm:max-w-sm w-full mx-auto p-6">
                    
                    <div class="p-4 bg-linear-to-br from-violet-700 to-sky-500 rounded-xl shadow-2xs">
                      <p class="mt-2 text-sm text-foreground-inverse">
                        This website uses cookies to enhance your browsing experience.
                      </p>
                      <a class="mt-3 inline-flex justify-center items-center gap-x-1 font-semibold text-foreground-inverse/80 text-sm hover:text-foreground-inverse focus:outline-hidden focus:text-foreground-inverse" href="#">
                        Learn more
                        <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="m9 18 6-6-6-6"/></svg>
                      </a>
                      <div class="mt-5 flex justify-between gap-x-2">
                        <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-full border-2 border-line-inverse text-foreground-inverse focus:outline-hidden focus:border-line-inverse/70 focus:text-foreground-inverse/70 focus:border-line-inverse/70focus:text-foreground-inverse/70 disabled:opacity-50 disabled:pointer-events-none">
                          Accept all
                        </button>
                        <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-full border border-transparent text-foreground-inverse hover:text-foreground-inverse/70 focus:outline-hidden focus:text-foreground-inverse/70 disabled:opacity-50 disabled:pointer-events-none">
                          Reject all
                        </button>
                      </div>
                    </div>
                    
                  </div>

Long-form privacy copy, icon-led rows, collapsible category sections, and footer actions inside a fixed-height panel.

Create a responsive UI block named "Scrollable Cookie Preferences Panel with Collapsible Details" 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/feedback-states/cookie-consent-prompts/#scrollable-cookie-preferences-panel-with-collapsible-details. 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: feedback-states/cookie-consent-prompts
- Block ID: scrollable-cookie-preferences-panel-with-collapsible-details
- Source description: Long-form privacy copy, icon-led rows, collapsible category sections, and footer actions inside a fixed-height panel.
- Preview iframe: https://preline.co/blocks/feedback-states/cookie-consent-prompts/iframes/free/scrollable-cookie-preferences-panel-with-collapsible-details.html (repo path: blocks/feedback-states/cookie-consent-prompts/iframes/free/scrollable-cookie-preferences-panel-with-collapsible-details.html)
- Source markup reference:
  - partials/blocks/sources/pages/cookies-scrollable-content-with-collapse.html
  - scripts/js/open-overlay-on-init.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):
  - Wrapper is `fixed inset-0 z-60 sm:max-w-lg w-full mx-auto p-6`; card is `bg-card rounded-xl shadow-2xl` and the scroll area is `p-4 md:p-6 h-120 overflow-x-hidden overflow-y-auto` with a custom 2px webkit scrollbar - the fixed `h-120` height is what makes it scroll.
  - Heading is `Allow the use of cookies?`, followed by `We use cookies and similar technologies to help:` and exactly 3 icon rows: `Provide and improve content on Htmlstream Products`, `Provide a safer experience by using information that we receive from cookies on and off Preline`, `Provide and improve Htmlstream Products for people who have an account`.
  - Two more paragraphs follow the icon list; the second begins `You can allow the use of all cookies, just essential cookies or you can choose more options below.` and ends with an inline primary `Cookies Policy` link.
  - Exactly two Preline collapses in a `divide-y divide-card-divider` list, in order `Essential cookies` then `Optional cookies`; both are CLOSED on first load (`aria-expanded="false"`, panel `hs-collapse hidden`) and the chevron rotates via `hs-collapse-open:rotate-180`.
  - Collapse wiring uses HSCollapse: toggles are `hs-collapse-toggle` carrying `data-hs-collapse="#hs-essential-cookie-collapse-heading"` and `data-hs-collapse="#hs-optional-cookie-collapse-heading"`, and the panels carry `role="region"` plus `aria-labelledby`; the Optional panel also contains a `More information` primary link.
  - Footer is two full-width `<a>` elements (anchors, not buttons) in a `flex border-t divide-x` row: `Only essentials` (`rounded-es-xl`, layer foreground) then `Allow all` (`rounded-ee-xl`, primary text on a layer background).
  - No dismiss X, no toggle switches, and no HSOverlay wrapper - the panel is visible on first load.

<div class="fixed inset-0 z-60 sm:max-w-lg w-full mx-auto p-6">
                    
                    <div class="bg-card rounded-xl shadow-2xl">
                      <div class="p-4 md:p-6 h-120 overflow-x-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                        <h2 class="text-lg sm:text-xl font-semibold text-foreground">
                          Allow the use of cookies?
                        </h2>

<p class="mt-3 text-sm text-foreground">
                          We use cookies and similar technologies to help:
                        </p>

<div class="mt-4 space-y-5">
                          
                          <div class="flex gap-x-5">
                            <svg class="shrink-0 mt-1 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
                            <div class="grow">
                              <p class="text-sm text-foreground">
                                Provide and improve content on Htmlstream Products
                              </p>
                            </div>
                          </div>

<div class="flex gap-x-5">
                            <svg class="shrink-0 mt-1 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 11 18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/></svg>
                            <div class="grow">
                              <p class="text-sm text-foreground">
                                Provide a safer experience by using information that we receive from cookies on and off Preline
                              </p>
                            </div>
                          </div>

<div class="flex gap-x-5">
                            <svg class="shrink-0 mt-1 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                            <div class="grow">
                              <p class="text-sm text-foreground">
                                Provide and improve Htmlstream Products for people who have an account
                              </p>
                            </div>
                          </div>
                          
                        </div>

<p class="mt-4 text-sm text-foreground">
                          For analytics and to provide certain features and improve our services for you, we use tools from other companies on Preline.
                        </p>

<p class="mt-4 text-sm text-foreground">
                          You can allow the use of all cookies, just essential cookies or you can choose more options below. You can learn more about cookies and how we use them, and review or change your choice at any time in our <a class="inline-flex items-center gap-x-1.5 text-primary decoration-2 hover:underline focus:outline-hidden focus:underline font-medium" href="#">Cookies Policy</a>.
                        </p>

<div class="mt-5 divide-y divide-card-divider">
                          
                          <div class="py-4 first:pt-0 last:pb-0">
                            <button type="button" class="hs-collapse-toggle flex w-full justify-between items-center gap-x-5 font-semibold text-foreground hover:text-foreground-hover focus:outline-hidden focus:text-foreground-focus" id="hs-essential-cookie-collapse" aria-expanded="false" aria-controls="hs-essential-cookie-collapse-heading" data-hs-collapse="#hs-essential-cookie-collapse-heading">
                              Essential cookies
                              <svg class="hs-collapse-open:rotate-180 shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                            </button>
                            <div id="hs-essential-cookie-collapse-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-essential-cookie-collapse" role="region">
                              <p class="mt-2 text-sm text-foreground">
                                These cookies are required to use Htmlstream Products. They're necessary for these sites to work as intended.
                              </p>
                            </div>
                          </div>

<div class="py-4 first:pt-0 last:pb-0">
                            <button type="button" class="hs-collapse-toggle flex w-full justify-between items-center gap-x-5 font-semibold text-foreground hover:text-foreground-hover focus:outline-hidden focus:text-foreground-focus" id="hs-optional-cookie-collapse" aria-expanded="false" aria-controls="hs-optional-cookie-collapse-heading" data-hs-collapse="#hs-optional-cookie-collapse-heading">
                              Optional cookies
                              <svg class="hs-collapse-open:rotate-180 shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                            </button>
                            <div id="hs-optional-cookie-collapse-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-optional-cookie-collapse" role="region">
                              <p class="mt-2 text-sm text-foreground">
                                We use tools from other companies for advertising and measurement services off Htmlstream Products, for analytics and to provide certain features and improve our services for you. These companies also use cookies.
                              </p>

<p><a class="mt-2 inline-flex items-center gap-x-1 text-sm text-primary decoration-2 hover:underline focus:outline-hidden focus:underline font-medium" href="#">
                                More information
                              </a></p>
                            </div>
                          </div>
                          
                        </div>
                      </div>

<div class="flex border-t border-card-divider divide-x divide-card-divider">
                        <a class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-es-xl bg-layer text-layer-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                          Only essentials
                        </a>
                        <a class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-ee-xl bg-layer text-primary shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                          Allow all
                        </a>
                      </div>
                      
                    </div>
                    
                  </div>

Language select, policy summary text, and primary accept and reject actions in a centered modal dialog.

Create a responsive UI block named "Cookie Consent Modal with Language Select" 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/feedback-states/cookie-consent-prompts/#cookie-consent-modal-with-language-select. 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: feedback-states/cookie-consent-prompts
- Block ID: cookie-consent-modal-with-language-select
- Source description: Language select, policy summary text, and primary accept and reject actions in a centered modal dialog.
- Preview iframe: https://preline.co/blocks/feedback-states/cookie-consent-prompts/iframes/free/cookie-consent-modal-with-language-select.html (repo path: blocks/feedback-states/cookie-consent-prompts/iframes/free/cookie-consent-modal-with-language-select.html)
- Source markup reference:
  - partials/blocks/sources/pages/cookies-modal-style-with-select-language.html
  - scripts/js/open-overlay-on-init.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):
  - Wrapper is `fixed inset-0 z-60 sm:max-w-4xl w-full mx-auto p-6`; the card is `bg-card rounded-xl shadow-2xl` split into header, scrollable body and footer.
  - Header holds the 26x26 Preline circular logo mark (rendered `size-8`, primary fill/stroke) on the left and a native `<select>` on the right with exactly 5 options in order: `English (US)` (marked selected), `Deutsch`, `Dansk`, `Italiano`, `中文 (繁體)`.
  - Body is `h-[70vh] sm:h-[65vh] bg-muted border-y border-card-divider` with a custom 2px webkit scrollbar and opens with the centered heading `Before you continue to use Preline`.
  - First list is introduced by `We use cookies and data to` and has 3 icon rows: `Deliver and maintain Preline services`, `Track outages and protect against spam, fraud and abuse`, `Measure audience engagement and site statistics to understand how our services are used and enhance the quality of those services`.
  - Second list is introduced by `If you choose to 'Accept all', we will also use cookies and data to` and has 4 icon rows: `Develop and improve new services`, `Deliver and measure the effectiveness of ads`, `Show personalised content, depending on your settings`, `Show personalised ads, depending on your settings`.
  - Two closing paragraphs follow: `If you choose to 'Reject all', we will not use cookies for these additional purposes.` and a longer non-personalised-content paragraph that uses curly apostrophes (`you’re`) - keep the British spellings such as `personalised`.
  - Footer has exactly two buttons, centered, in order `Reject all` (layer/outline) then `Allow all` (primary filled); there is no dismiss X and no third manage option.
  - Fully static: the language control is a plain `<select>` (not HSSelect) and the card is not wrapped in an HSOverlay, so it is visible on first load.

<select class="py-2 ps-3 pe-8 block cursor-pointer bg-layer border-layer-line rounded-lg text-sm hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus focus:ring-0">
                            <option selected>English (US)</option>
                            <option>Deutsch</option>
                            <option>Dansk</option>
                            <option>Italiano</option>
                            <option>中文 (繁體)</option>
                          </select>
                        </div>
                      </div>

<div class="p-4 md:p-6 h-[70vh] sm:h-[65vh] bg-muted border-y border-card-divider flex flex-col overflow-x-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                        <div class="text-center">
                          <h2 class="text-lg sm:text-xl font-semibold text-foreground">
                            Before you continue to use Preline
                          </h2>
                        </div>

<p class="mt-4 text-sm text-muted-foreground-2">
                          We use cookies and data to
                        </p>

<div class="mt-4 space-y-5">
                          
                          <div class="flex gap-x-4">
                            <svg class="shrink-0 mt-1 size-4 text-muted-foreground-2" 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="m15 5 4 4"/><path d="M13 7 8.7 2.7a2.41 2.41 0 0 0-3.4 0L2.7 5.3a2.41 2.41 0 0 0 0 3.4L7 13"/><path d="m8 6 2-2"/><path d="m2 22 5.5-1.5L21.17 6.83a2.82 2.82 0 0 0-4-4L3.5 16.5Z"/><path d="m18 16 2-2"/><path d="m17 11 4.3 4.3c.94.94.94 2.46 0 3.4l-2.6 2.6c-.94.94-2.46.94-3.4 0L11 17"/></svg>
                            <div class="grow">
                              <p class="text-sm text-muted-foreground-2">
                                Deliver and maintain Preline services
                              </p>
                            </div>
                          </div>

<div class="flex gap-x-4">
                            <svg class="shrink-0 mt-1 size-4 text-muted-foreground-2" 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.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
                            <div class="grow">
                              <p class="text-sm text-muted-foreground-2">
                                Track outages and protect against spam, fraud and abuse
                              </p>
                            </div>
                          </div>

<div class="flex gap-x-4">
                            <svg class="shrink-0 mt-1 size-4 text-muted-foreground-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" x2="18" y1="20" y2="10"/><line x1="12" x2="12" y1="20" y2="4"/><line x1="6" x2="6" y1="20" y2="14"/></svg>
                            <div class="grow">
                              <p class="text-sm text-muted-foreground-2">
                                Measure audience engagement and site statistics to understand how our services are used and enhance the quality of those services
                              </p>
                            </div>
                          </div>
                          
                        </div>

<p class="mt-8 text-sm text-muted-foreground-2">
                          If you choose to 'Accept all', we will also use cookies and data to
                        </p>

<div class="mt-4 space-y-5">
                          
                          <div class="flex gap-x-4">
                            <svg class="shrink-0 mt-1 size-4 text-muted-foreground-2" 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="m15 5 4 4"/><path d="M13 7 8.7 2.7a2.41 2.41 0 0 0-3.4 0L2.7 5.3a2.41 2.41 0 0 0 0 3.4L7 13"/><path d="m8 6 2-2"/><path d="m2 22 5.5-1.5L21.17 6.83a2.82 2.82 0 0 0-4-4L3.5 16.5Z"/><path d="m18 16 2-2"/><path d="m17 11 4.3 4.3c.94.94.94 2.46 0 3.4l-2.6 2.6c-.94.94-2.46.94-3.4 0L11 17"/></svg>
                            <div class="grow">
                              <p class="text-sm text-muted-foreground-2">
                                Develop and improve new services
                              </p>
                            </div>
                          </div>

<div class="flex gap-x-4">
                            <svg class="shrink-0 mt-1 size-4 text-muted-foreground-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" x2="18" y1="20" y2="10"/><line x1="12" x2="12" y1="20" y2="4"/><line x1="6" x2="6" y1="20" y2="14"/></svg>
                            <div class="grow">
                              <p class="text-sm text-muted-foreground-2">
                                Deliver and measure the effectiveness of ads
                              </p>
                            </div>
                          </div>

<div class="flex gap-x-4">
                            <svg class="shrink-0 mt-1 size-4 text-muted-foreground-2" 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 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/><path d="M5 3v4"/><path d="M19 17v4"/><path d="M3 5h4"/><path d="M17 19h4"/></svg>
                            <div class="grow">
                              <p class="text-sm text-muted-foreground-2">
                                Show personalised content, depending on your settings
                              </p>
                            </div>
                          </div>

<div class="flex gap-x-4">
                            <svg class="shrink-0 mt-1 size-4 text-muted-foreground-2" 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 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2"/><path d="M18 14h-8"/><path d="M15 18h-5"/><path d="M10 6h8v4h-8V6Z"/></svg>
                            <div class="grow">
                              <p class="text-sm text-muted-foreground-2">
                                Show personalised ads, depending on your settings
                              </p>
                            </div>
                          </div>
                          
                        </div>

<p class="mt-8 text-sm text-muted-foreground-2">
                          If you choose to 'Reject all', we will not use cookies for these additional purposes.
                        </p>

<p class="mt-4 text-sm text-muted-foreground-2">
                          Non-personalised content is influenced by things like the content that you’re currently viewing, activity in your active Search session, and your location. Non-personalised ads are influenced by the content that you’re currently viewing and your general location.
                        </p>
                      </div>

<div class="p-4 md:px-6">
                        <div class="grid justify-center gap-x-3">
                          <div class="flex gap-x-3">
                            <button type="button" class="py-3 px-4 inline-flex items-center gap-x-2 text-sm 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">
                              Reject all
                            </button>
                            <button type="button" class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                              Allow all
                            </button>
                          </div>
                        </div>
                      </div>
                      
                    </div>
                    
                  </div>