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.

<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.

<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.

<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.

<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.

<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.

<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.

<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.

<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.

<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.

<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>