Cookie banners
Inline with icons and buttons
Open this inline with icon and btns cookie banners example in new window
Copy inline with icon and btns cookie banners code
Close inline with icon and btns cookie banners code
<div class="min-h-[20rem]">
<div class="fixed bottom-0 right-0 z-[60] sm:max-w-xl w-full mx-auto p-6">
<!-- Card -->
<div class="p-4 bg-white border border-gray-200 rounded-xl shadow-sm ">
<div class="flex gap-x-5">
<svg class="hidden sm:block flex-shrink-0 w-20" width="72" height="63" viewBox="0 0 72 63" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.5174 56.1528C16.2903 57.6825 16.929 61.4559 14.8118 60.9459C13.5013 60.5381 11.4445 57.6213 12.493 56.1528C12.661 55.8468 13.2189 55.2757 14.106 55.4389" stroke="currentColor" class="" stroke-width="2" stroke-linecap="round" />
<path d="M15.5173 49.6263L14.0262 48.5579C13.5346 48.2056 12.8477 48.3707 12.658 48.945C12.3456 49.8907 12.1258 51.1463 12.462 52.2324C12.5336 52.4636 12.7127 52.6466 12.9449 52.7146C13.8342 52.9751 15.2568 52.9048 15.8197 51.054" stroke="currentColor" class="" stroke-width="2" stroke-linecap="round" />
<mask id="path-3-inside-1_4542_101166" fill="currentColor" class="text-gray-800 ">
<ellipse rx="1.09811" ry="0.738034" transform="matrix(0.921654 0.388014 -0.38048 0.924789 14.2069 43.4055)" />
</mask>
<path d="M13.3756 43.0555C13.6288 42.4402 14.1378 42.259 14.3273 42.2214C14.5316 42.1809 14.6503 42.223 14.687 42.2384L13.1651 45.9376C13.7607 46.1884 14.4484 46.2907 15.1206 46.1574C15.7781 46.0269 16.654 45.5999 17.0622 44.6076L13.3756 43.0555ZM14.687 42.2384C14.7237 42.2539 14.8369 42.3094 14.9524 42.4846C15.0596 42.6471 15.2913 43.1401 15.0381 43.7554L11.3515 42.2034C10.9432 43.1957 11.261 44.1253 11.6329 44.689C12.0131 45.2654 12.5694 45.6868 13.1651 45.9376L14.687 42.2384ZM15.0381 43.7554C14.7849 44.3708 14.2759 44.552 14.0864 44.5895C13.8821 44.6301 13.7634 44.588 13.7267 44.5725L15.2486 40.8734C14.653 40.6226 13.9653 40.5203 13.2931 40.6536C12.6357 40.784 11.7597 41.2111 11.3515 42.2034L15.0381 43.7554ZM13.7267 44.5725C13.69 44.5571 13.5768 44.5015 13.4613 44.3264C13.3541 44.1638 13.1225 43.6709 13.3756 43.0555L17.0622 44.6076C17.4705 43.6153 17.1527 42.6857 16.7809 42.1219C16.4007 41.5455 15.8443 41.1241 15.2486 40.8734L13.7267 44.5725Z" fill="black" mask="url(#path-3-inside-1_4542_101166)" />
<mask id="path-5-inside-2_4542_101166" fill="currentColor" class="text-gray-800 ">
<ellipse rx="1.00988" ry="1.0181" transform="matrix(0.921654 0.388014 -0.38048 0.924789 21.3702 57.2201)" />
</mask>
<path d="M20.4576 56.8359C20.6581 56.3486 21.2257 56.094 21.7438 56.312L20.2219 60.0112C21.768 60.6621 23.5159 59.9153 24.1442 58.388L20.4576 56.8359ZM21.7438 56.312C22.2618 56.5301 22.4832 57.1169 22.2827 57.6043L18.5961 56.0522C17.9677 57.5795 18.6757 59.3603 20.2219 60.0112L21.7438 56.312ZM22.2827 57.6043C22.0822 58.0916 21.5146 58.3462 20.9966 58.1281L22.5185 54.429C20.9724 53.7781 19.2245 54.5249 18.5961 56.0522L22.2827 57.6043ZM20.9966 58.1281C20.4785 57.9101 20.2571 57.3233 20.4576 56.8359L24.1442 58.388C24.7726 56.8607 24.0646 55.0799 22.5185 54.429L20.9966 58.1281Z" fill="black" mask="url(#path-5-inside-2_4542_101166)" />
<mask id="path-7-inside-3_4542_101166" fill="currentColor" class="text-gray-800 ">
<ellipse rx="1.00988" ry="1.0181" transform="matrix(0.921654 0.388014 -0.38048 0.924789 6.75397 38.8236)" />
</mask>
<path d="M5.84142 38.4394C6.04192 37.9521 6.60952 37.6975 7.12756 37.9156L5.60564 41.6147C7.15177 42.2656 8.89966 41.5188 9.52804 39.9915L5.84142 38.4394ZM7.12756 37.9156C7.6456 38.1337 7.86701 38.7205 7.66651 39.2078L3.9799 37.6557C3.35152 39.1831 4.05951 40.9638 5.60564 41.6147L7.12756 37.9156ZM7.66651 39.2078C7.46601 39.6951 6.89842 39.9498 6.38037 39.7317L7.90229 36.0325C6.35616 35.3816 4.60827 36.1284 3.9799 37.6557L7.66651 39.2078ZM6.38037 39.7317C5.86233 39.5136 5.64092 38.9268 5.84142 38.4394L9.52804 39.9915C10.1564 38.4642 9.44843 36.6834 7.90229 36.0325L6.38037 39.7317Z" fill="black" mask="url(#path-7-inside-3_4542_101166)" />
<path d="M31.6479 50.2383C31.5807 51.2241 32.1721 53.053 35.0756 52.4819" stroke="currentColor" class="" stroke-width="2" stroke-linecap="round" />
<path d="M50.9903 34.6769C50.1699 34.1428 48.3973 33.5907 47.8709 35.6552" stroke="currentColor" class="" stroke-width="2" stroke-linecap="round" />
<path d="M40.9087 17.4562C40.0882 16.9221 38.3156 16.37 37.7892 18.4345" stroke="currentColor" class="" stroke-width="2" stroke-linecap="round" />
<path d="M27.8502 29.3345C27.1279 29.998 26.1419 31.587 27.977 32.6357" stroke="currentColor" class="" stroke-width="2" stroke-linecap="round" />
<path d="M62.1917 19.585C62.4894 18.6451 62.5577 16.7703 60.4502 16.7902" stroke="currentColor" class="" stroke-width="2" stroke-linecap="round" />
<ellipse cx="51.2061" cy="22.3973" rx="3.02446" ry="3.05945" fill="currentColor" class="text-gray-800 " />
<path d="M67.7398 29.6361C68.8249 31.2826 67.6381 32.6215 66.8281 33.1457C66.7645 33.1869 66.695 33.2184 66.6214 33.2363C65.0504 33.618 63.6063 31.5388 63.6063 30.0441C63.6064 28.8034 66.3283 27.4945 67.7398 29.6361Z" fill="currentColor" class="text-gray-800 " />
<path d="M58.868 38.6126C57.9809 36.4914 54.6002 37.7288 53.0207 38.6126C51.7101 39.2284 52.0126 41.4681 53.6256 43.3038C54.9161 44.7723 56.5157 44.1196 57.1542 43.6097C58.0951 42.8279 59.7552 40.7339 58.868 38.6126Z" fill="currentColor" class="text-gray-800 " />
<path d="M5.85665 41.8048C5.21042 40.2694 2.74791 41.1651 1.59743 41.8048C0.642774 42.2505 0.863078 43.8717 2.03804 45.2004C2.978 46.2634 4.14317 45.7909 4.60826 45.4219C5.29365 44.8559 6.50288 43.3402 5.85665 41.8048Z" stroke="currentColor" class="" stroke-width="2" stroke-linecap="round" />
<path d="M45.4596 49.2172C40.9431 47.667 40.2844 51.6987 40.5196 53.9083C40.8221 55.3361 42.4351 55.54 43.4433 55.2341C45.5677 54.5894 51.1052 51.1548 45.4596 49.2172Z" fill="currentColor" class="text-gray-800 " />
<ellipse rx="2.96295" ry="3.45694" transform="matrix(0.855131 0.518411 -0.509711 0.860345 30.4996 41.3871)" fill="currentColor" class="text-gray-800 " />
<path d="M38.5032 29.1282C39.471 27.8228 37.8983 26.0687 36.991 25.3549C36.0836 24.6411 34.8335 24.8654 33.8657 26.1707C32.7567 27.6664 37.2934 30.7599 38.5032 29.1282Z" fill="currentColor" class="text-gray-800 " />
<path d="M19.2476 18.9295C16.4247 18.2768 15.7862 19.8813 15.8198 20.7652C16.0215 23.8246 20.5582 24.4365 21.6672 23.6207C22.4364 23.0548 22.7761 19.7453 19.2476 18.9295Z" fill="currentColor" class="text-gray-800 " />
<path d="M36.6888 6.79381C35.6403 4.67259 33.2947 5.02613 32.2529 5.46805C28.7042 6.61025 29.3292 8.52749 30.1358 9.13938C31.3456 10.1252 34.2289 12.0153 36.0839 11.6889C38.4027 11.281 37.9994 9.44533 36.6888 6.79381Z" fill="currentColor" class="text-gray-800 " />
<path d="M56.9526 54.9284C57.7592 53.5006 60.2795 51.0735 65.1187 49.9313C66.0596 49.7953 67.9818 48.5647 68.1431 44.7302C68.3448 39.9371 73.5872 32.9003 69.3529 28.1072C67.5382 26.053 68.4456 23.2121 67.5382 17.7051" stroke="currentColor" class="" stroke-width="2" stroke-linecap="round" />
<path d="M66.7316 16.176C65.1521 14.2383 60.6625 9.8939 55.3394 8.01743C48.703 5.67797 55.8063 4.55591 44.1399 4.75246C44.0816 4.75344 44.0194 4.76029 43.9617 4.76836C43.019 4.90008 40.5102 4.51266 37.2614 1.95295C37.2161 1.91728 37.1681 1.88406 37.1153 1.86091C36.6 1.63502 35.1744 1.43154 32.9584 2.2045C30.6195 3.02036 24.0531 5.46791 21.0622 6.58971C20.4237 6.92965 19.0056 8.05825 18.441 9.85312C17.7353 12.0967 5.93991 23.5187 9.56927 28.9237" stroke="currentColor" class="" stroke-width="2" stroke-linecap="round" />
<path d="M10.4768 30.1484C11.9084 30.3333 14.621 31.3895 15.0562 34.1372C15.1369 34.6464 15.5068 35.0847 16.0079 35.2063C18.8253 35.8904 22.6446 38.4014 20.8122 44.4603C20.7218 44.7592 20.7652 45.0847 20.9158 45.3583C21.7327 46.8422 22.367 49.4462 20.6725 51.7386C20.1262 52.4776 20.4167 53.842 21.2912 54.1243C23.3727 54.7962 25.8398 55.985 27.2662 57.833C27.5533 58.2049 28.0338 58.3932 28.4956 58.3062C30.4142 57.9446 33.9492 57.9776 37.2937 60.233C42.1328 63.4964 42.3345 60.0291 48.6858 60.7429C53.7669 61.314 55.7765 58.3294 56.1462 56.7656" stroke="currentColor" class="" stroke-width="2" stroke-linecap="round" />
</svg>
<div class="grow">
<h2 class="text-lg font-semibold text-hs2-text ">
We are using cookies to improve your experience!
</h2>
<p class="mt-2 text-sm text-hs2-text-light ">
By clicking "Allow all", you agree to use of all cookies. Visit our <a class="inline-flex items-center gap-x-1.5 text-hs2-link hover:text-hs2-hover-state decoration-2 hover: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 justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-success text-white hover:bg-hs2-success-hover focus:outline-none focus:ring-2 focus:ring-hs2-success focus:ring-offset-2 transition-all text-sm ">
Allow all
</button>
<button type="button" class="py-2 px-3 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-hs2-primary border-hs2-primary shadow-sm align-middle hover:bg-hs2-primary hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-hs2-primary transition-all text-sm ">
Manage cookies
</button>
</div>
</div>
</div>
</div>
<!-- End Card -->
</div>
</div>Inline with buttons
Open this inline with btns cookie banners example in new window
Copy inline with btns cookie banners code
Close inline with btns cookie banners code
<div class="min-h-[20rem]">
<div class="fixed bottom-0 right-0 z-[60] sm:max-w-xl w-full mx-auto p-6">
<!-- Card -->
<div class="p-4 bg-white border border-gray-200 rounded-xl shadow-sm ">
<div class="grid sm:flex sm:items-center gap-y-3 sm:gap-y-0 sm:gap-x-5">
<div class="sm:max-w-sm">
<h2 class="text-hs2-text-light">
<span class="font-semibold text-hs2-text ">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 justify-center items-center gap-2 rounded-md border font-medium bg-hs2-danger text-white shadow-sm align-middle hover:bg-hs2-danger-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-hs2-danger-hover transition-all text-sm ">
Reject
</button>
</div>
<div>
<button type="button" class="py-2 px-3 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-success text-white hover:bg-hs2-success-hover focus:outline-none focus:ring-2 focus:ring-hs2-success focus:ring-offset-2 transition-all text-sm ">
Accept
</button>
</div>
</div>
</div>
</div>
<!-- End Card -->
</div>
</div>Simple with dismiss btn
Open this simple dismiss btn cookie banners example in new window
Copy simple dismiss btn cookie banners code
Close simple dismiss btn cookie banners code
<div class="min-h-[20rem]">
<div id="cookies-simple-with-dismiss-button" class="fixed bottom-0 left-1/2 transform -translate-x-1/2 z-[60] sm:max-w-4xl w-full mx-auto p-6">
<!-- Card -->
<div class="p-4 bg-white border border-gray-200 rounded-xl shadow-sm ">
<div class="flex justify-between items-center gap-x-5 sm:gap-x-10">
<h2 class="text-sm text-hs2-text-light ">
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-hs2-link hover:text-hs2-hover-state decoration-2 hover:underline font-medium" href="#">Cookies Policy.</a>
</h2>
<button type="button" class="inline-flex bg-hs2-danger rounded-full p-3 text-white hover:bg-hs2-danger-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-50 focus:ring-gray-600 " data-hs-remove-element="#cookies-simple-with-dismiss-button">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z" fill="currentColor" />
</svg>
</button>
</div>
</div>
<!-- End Card -->
</div>
</div>Blurred background with stacked buttons
Open this blurred bg with stacked btns cookie banners example in new window
Copy blurred bg with stacked btns cookie banners code
Close blurred bg with stacked btns cookie banners code
<div class="min-h-[20rem]">
<div id="cookies-with-stacked-buttons" class="fixed bottom-0 right-0 z-[60] sm:max-w-sm w-full mx-auto p-6">
<!-- Card -->
<div class="p-4 bg-white/[.6] backdrop-blur-lg rounded-xl shadow-2xl ">
<div class="flex justify-between items-center gap-x-5 sm:gap-x-10">
<h2 class="font-semibold text-hs2-text ">
Cookie Settings
</h2>
<button type="button" class="inline-flex rounded-full p-2 text-white hover:bg-hs2-danger-hover bg-hs2-danger focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-50 focus:ring-hs2-danger " data-hs-remove-element="#cookies-with-stacked-buttons">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z" fill="currentColor" />
</svg>
</button>
</div>
<p class="mt-2 text-sm text-hs2-text-light ">
We use cookies to improve your experience and for marketing. Visit our <a class="inline-flex items-center gap-x-1.5 text-hs2-link hover:text-hs2-hover-state decoration-2 hover: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-2 rounded-md border border-transparent font-semibold bg-hs2-success text-white hover:bg-hs2-success-hover focus:outline-none focus:ring-2 focus:ring-hs2-success focus:ring-offset-2 transition-all text-sm ">
Allow all
</button>
</div>
<div class="grid w-full">
<button type="button" class="py-2 px-3 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-danger text-white hover:bg-hs2-danger-hover focus:outline-none focus:ring-2 focus:ring-hs2-danger focus:ring-offset-2 transition-all text-sm ">
Reject all
</button>
</div>
</div>
<div class="grid w-full">
<button type="button" class="py-2 px-3 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-hs2-primary border-hs2-primary hover:bg-hs2-primary hover:text-white shadow-sm align-middle focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-hs2-primary transition-all text-sm ">
Manage cookies
</button>
</div>
</div>
<!-- End Card -->
</div>
</div>Full width - centered content
Open this full width centered content cookie banners example in new window
Copy full width centered content cookie banners code
Close full width centered content cookie banners code
<div class="min-h-[20rem]">
<div class="fixed bottom-0 inset-x-0 z-[60]">
<!-- Card -->
<div class="p-4 bg-white border border-gray-200 shadow-sm ">
<div class="max-w-sm w-full mx-auto">
<h2 class="font-semibold text-hs2-text ">
Cookie Settings
</h2>
<p class="mt-2 text-sm text-hs2-text-light ">
We use cookies to improve your experience and for marketing. Visit our <a class="inline-flex items-center gap-x-1.5 text-hs2-link hover:text-hs2-hover-state decoration-2 hover: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 justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-success text-white hover:bg-hs2-success-hover focus:outline-none focus:ring-2 focus:ring-hs2-success focus:ring-offset-2 transition-all text-sm ">
Agree
</button>
<button type="button" class="py-2 px-3 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-hs2-danger text-white shadow-sm align-middle hover:bg-hs2-danger-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-hs2-danger transition-all text-sm ">
Reject
</button>
</div>
</div>
</div>
<!-- End Card -->
</div>
</div>Full width with switchers
Open this full width with switchers cookie banners example in new window
Copy full width with switchers cookie banners code
Close full width with switchers cookie banners code
<div class="min-h-[20rem]">
<div class="fixed bottom-0 inset-x-0 z-[60]">
<!-- Card -->
<div class="p-4 sm:p-6 bg-white border border-gray-200 shadow-sm ">
<div class="max-w-[85rem] mx-auto">
<div class="grid lg:grid-cols-4 xl:grid-cols-5 gap-5 items-center">
<div class="col-span-1">
<a href="../index.html" class="flex-none inline-block">
<svg width="68px" height="25px" viewBox="0 0 68 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>hs2-logo</title>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="hs2-logo" fill="#1E3773" fill-rule="nonzero">
<path d="M21.9359377,0.685756649 L21.9359377,9.89250301 L5.01272282,9.89250301 L5.01272282,0.685756649 C5.01272282,0.423964415 4.79936558,0.21314058 4.53442747,0.21314058 L0.478295349,0.21314058 C0.213357239,0.21314058 0,0.423964415 0,0.685756649 L0,24.2146233 C0,24.4764155 0.213357239,24.6872394 0.478295349,24.6872394 L4.53442747,24.6872394 C4.79936558,24.6872394 5.01272282,24.4764155 5.01272282,24.2146233 L5.01272282,14.8480215 L21.9359377,14.8480215 L21.9359377,24.2146233 C21.9359377,24.4764155 22.1492949,24.6872394 22.414233,24.6872394 L26.4703651,24.6872394 C26.7353032,24.6872394 26.9486605,24.4764155 26.9486605,24.2146233 L26.9486605,0.685756649 C26.9486605,0.423964415 26.7353032,0.21314058 26.4703651,0.21314058 L22.414233,0.21314058 C22.1492949,0.21314058 21.9359377,0.423964415 21.9359377,0.685756649 Z" id="Path"></path>
<path d="M54.0356515,6.64210917 L52.1201255,3.13455657 C52.0146192,2.9422667 52.0591663,2.70595867 52.2209427,2.55768696 C52.6500017,2.16152349 53.1517429,1.79084422 53.7074096,1.4479659 C54.3849947,1.03095172 55.1751198,0.681123158 56.0519946,0.410063942 C56.9359032,0.136687981 57.9557977,1.02884165e-16 59.0858877,1.02884165e-16 C60.3566528,1.02884165e-16 61.5195669,0.194606617 62.541806,0.576869614 C63.5687343,0.961449356 64.4549874,1.51051802 65.174775,2.20554166 C65.8969072,2.90288203 66.4596076,3.75312761 66.8441196,4.72847743 C67.2286315,5.70151052 67.4232321,6.78111389 67.4232321,7.94180335 C67.4232321,8.69937911 67.3317933,9.40830322 67.1489156,10.0523584 C66.9683826,10.6940969 66.717512,11.3057177 66.4033376,11.8733204 C66.0915078,12.4386062 65.7163742,12.9899917 65.2896597,13.5158929 C64.869979,14.0325271 64.4080957,14.5514781 63.920422,15.0634788 L59.3508258,19.812807 L67.5217047,19.812807 C67.7866428,19.812807 68,20.0236308 68,20.285423 L68,24.2192568 C68,24.481049 67.7866428,24.6918729 67.5217047,24.6918729 L52.2209427,24.6918729 C51.9560046,24.6918729 51.7426473,24.481049 51.7426473,24.2192568 L51.7426473,21.0522658 C51.7426473,20.8275415 51.8317415,20.6097674 51.9888287,20.4475952 L60.2065993,12.040126 C60.8255698,11.421555 61.2968314,10.7914002 61.6086612,10.1635622 C61.9134572,9.54962469 62.0681998,8.88703549 62.0681998,8.19201186 C62.0681998,7.7147623 61.9884839,7.27689741 61.8290522,6.88536744 C61.6696204,6.4961542 61.4445402,6.15327588 61.1585008,5.86831619 C60.8724615,5.5833565 60.5231183,5.35863219 60.1198497,5.2010935 C59.7118919,5.04123807 59.2500086,4.96015198 58.7482674,4.96015198 C58.2160466,4.96015198 57.7307175,5.0273376 57.3063476,5.15707534 C56.874944,5.28912983 56.4740199,5.46983597 56.1152984,5.69224354 C55.7518877,5.91696784 55.4189567,6.19034381 55.1000931,6.48225373 C54.9852084,6.58650727 54.8773575,6.68149384 54.7741958,6.76953016 C54.5420819,6.96877027 54.1833603,6.90621814 54.0379961,6.63979242 L54.0356515,6.64210917 Z" id="Path"></path>
<path d="M48.7814364,14.2294505 C48.3969245,13.4440738 47.8647037,12.7652674 47.1988415,12.2115652 C46.5400131,11.66713 45.7545771,11.2199981 44.8636348,10.8863868 C43.9844154,10.557409 43.0278247,10.302567 42.0173086,10.1334445 L40.7559218,9.91567047 C40.0970934,9.80446669 39.4828121,9.67936243 38.9271455,9.54035771 C38.3855463,9.40598647 37.9142847,9.2391808 37.5250836,9.04689093 C37.1569838,8.86618478 36.8685998,8.64146048 36.6693101,8.37966824 C36.4817433,8.13640997 36.3903045,7.8421833 36.3903045,7.48308776 C36.3903045,7.08924103 36.4793987,6.7509962 36.6646209,6.44981929 C36.8521877,6.14169215 37.1194704,5.87758317 37.4570906,5.6598091 C37.8064338,5.43508479 38.2331483,5.26132889 38.720822,5.14085812 C39.217874,5.01807061 39.7758853,4.95551849 40.376099,4.95551849 C41.5601145,4.95551849 42.676137,5.14317487 43.6936869,5.51153739 C44.6408992,5.85441572 45.5294969,6.28764711 46.3477571,6.79038087 C46.3477571,6.79038087 46.3501017,6.78806413 46.3501017,6.78574738 C46.427473,6.83439904 46.5189118,6.86219998 46.6173844,6.86219998 C46.8143296,6.86219998 46.9854843,6.74867946 47.0675447,6.58650727 C47.0675447,6.58650727 47.0675447,6.58650727 47.0675447,6.58650727 L48.9549357,3.14382356 C48.9549357,3.14382356 48.9549357,3.14382356 48.9549357,3.14382356 C48.9994828,3.0696877 49.0252732,2.98396812 49.0252732,2.8912983 C49.0252732,2.70827541 48.9244561,2.55073673 48.7767472,2.4627004 C48.1249526,2.06422018 47.4731579,1.70975813 46.8377754,1.41321472 C46.1437782,1.08887035 45.4357135,0.820127884 44.7346826,0.616254286 C44.0359963,0.412380688 43.3091749,0.259475489 42.5753198,0.162172181 C41.8438093,0.0648688722 41.0700962,0.0162172181 40.2776265,0.0162172181 C39.0678206,0.0162172181 37.9002172,0.180706144 36.805296,0.50736725 C35.7056856,0.834028357 34.7233045,1.32517839 33.8862876,1.96691688 C33.042237,2.61328885 32.3599628,3.43341674 31.8605661,4.40413307 C31.3564804,5.38179965 31.1009206,6.51932166 31.1009206,7.78658141 C31.1009206,8.89166898 31.2814536,9.78361598 31.6378306,10.5921601 C31.9942075,11.403021 32.4959487,12.0980447 33.1313312,12.6563803 C33.75968,13.2077657 34.5099472,13.6595311 35.3657208,13.9954592 C36.2074268,14.3267538 37.1405717,14.579279 38.1463986,14.7507182 L39.562528,14.9870262 C40.3292073,15.1190807 41.0114816,15.2627189 41.5882495,15.4109906 C42.1556391,15.5569456 42.6339344,15.7307015 43.0114126,15.9276249 C43.3677895,16.1129645 43.6350722,16.3330553 43.8085715,16.5855806 C43.9750371,16.8265221 44.0570975,17.1902511 44.0570975,17.5308127 C44.0570975,17.9339264 43.9633141,18.274488 43.7710582,18.5733482 C43.5717684,18.883792 43.2927628,19.1525345 42.9363859,19.3749421 C42.5706306,19.6042999 42.1298486,19.7780558 41.6257629,19.8938931 C41.1122987,20.0120471 40.5519429,20.0722825 39.9564183,20.0722825 C39.2553874,20.0722825 38.5660794,20.0027801 37.907251,19.8684089 C37.2437334,19.7317209 36.6083509,19.548698 36.01986,19.3262904 C35.4313692,19.1015661 34.8780471,18.8374571 34.3739613,18.538597 C33.9495914,18.2883885 33.5650795,18.0242795 33.2227701,17.755537 C33.2227701,17.755537 33.2227701,17.7578538 33.2227701,17.7601705 C33.0234803,17.6049486 32.7350964,17.6142155 32.5498742,17.7972384 C32.5240837,17.8227226 32.5029825,17.8482068 32.4842258,17.8760078 C32.4842258,17.8760078 32.4842258,17.8760078 32.4842258,17.8760078 L30.381133,21.3210082 C30.381133,21.3210082 30.381133,21.3210082 30.381133,21.3210082 C30.2639037,21.5132981 30.2873496,21.7681401 30.4561597,21.932629 C30.4842947,21.96043 30.5124297,21.9812807 30.5452539,22.0021314 C31.1079543,22.4562135 31.731614,22.8709109 32.409199,23.225373 C33.1594663,23.6192197 33.9566252,23.9505143 34.7795745,24.2123066 C35.6001793,24.4740988 36.460642,24.6710221 37.3304831,24.8030766 C38.2003241,24.9328144 39.0771989,25 39.935317,25 C41.1545013,25 42.3408613,24.8378278 43.4592284,24.5181169 C44.5869738,24.1960893 45.5974899,23.7026226 46.4649864,23.0516171 C47.3395166,22.3936614 48.0475813,21.5573163 48.5657346,20.5634325 C49.0862325,19.5625985 49.348826,18.3741081 49.348826,17.028079 C49.348826,15.9646928 49.1542254,15.0240942 48.7673689,14.2317672 L48.7814364,14.2294505 Z" id="Path"></path>
</g>
</g>
</svg>
</a>
</div>
<!-- End Col -->
<div class="lg:col-span-3">
<h2 class="text-lg font-semibold text-hs2-text ">
We use cookies
</h2>
<p class="mt-2 text-sm text-hs2-text-light ">
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 grid md:flex 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-hs2-text-light md:ml-3 ">Necessary</label>
<input type="checkbox" id="hs-cookies-necessary" class="relative shrink-0 w-[3.25rem] h-7 bg-gray-100 checked:bg-none checked:bg-hs2-success border-2 rounded-full cursor-pointer transition-colors ease-in-out duration-200 border border-transparent ring-1 ring-transparent focus:border-hs2-success-hover focus:ring-hs2-success-hover ring-offset-white focus:outline-none appearance-none text-hs2-success
before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 " checked>
</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-hs2-text-light md:ml-3 ">Preferences</label>
<input type="checkbox" id="hs-cookies-preferences" class="relative shrink-0 w-[3.25rem] h-7 bg-gray-100 checked:bg-none checked:bg-hs2-success border-2 rounded-full cursor-pointer transition-colors ease-in-out duration-200 border border-transparent ring-1 ring-transparent focus:border-hs2-success-hover focus:ring-hs2-success-hover ring-offset-white focus:outline-none appearance-none text-hs2-success
before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 ">
</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-hs2-text-light md:ml-3 ">Statistics</label>
<input type="checkbox" id="hs-cookies-statistics" class="relative shrink-0 w-[3.25rem] h-7 bg-gray-100 checked:bg-none checked:bg-hs2-success border-2 rounded-full cursor-pointer transition-colors ease-in-out duration-200 border border-transparent ring-1 ring-transparent focus:border-hs2-success-hover focus:ring-hs2-success-hover ring-offset-white focus:outline-none appearance-none text-hs2-success
before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 ">
</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-hs2-text-light md:ml-3 ">Marketing</label>
<input type="checkbox" id="hs-cookies-marketing" class="relative shrink-0 w-[3.25rem] h-7 bg-gray-100 checked:bg-none checked:bg-hs2-success border-2 rounded-full cursor-pointer transition-colors ease-in-out duration-200 border border-transparent ring-1 ring-transparent focus:border-hs2-success-hover focus:ring-hs2-success-hover ring-offset-white focus:outline-none appearance-none text-hs2-success
before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 ">
</div>
</div>
</div>
<!-- End Col -->
<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-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-success text-white hover:bg-hs2-success-hover focus:outline-none focus:ring-2 focus:ring-hs2-success focus:ring-offset-2 transition-all text-sm ">
Allow all
</button>
<button type="button" class="py-[.688rem] px-4 inline-flex justify-center items-center gap-2 rounded-md border-2 border-hs2-success font-semibold text-hs2-success hover:text-white hover:bg-hs2-success hover:border-hs2-success focus:outline-none focus:ring-2 focus:ring-hs2-success focus:ring-offset-2 transition-all text-sm ">
Allow selection
</button>
<button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-hs2-danger text-white shadow-sm align-middle hover:bg-hs2-danger-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-hs2-danger transition-all text-sm ">
Reject all
</button>
</div>
</div>
<!-- End Col -->
</div>
</div>
</div>
<!-- End Card -->
</div>
</div>Simple with icon and dismiss button
Open this simple with icon dismiss btn cookie banners example in new window
Copy simple with icon dismiss btn cookie banners code
Close simple with icon dismiss btn cookie banners code
<div class="min-h-[20rem]">
<div id="cookies-simple-with-icon-and-dismiss-button" class="fixed bottom-0 right-0 z-[60] sm:max-w-sm w-full mx-auto p-6">
<!-- Card -->
<div class="p-4 bg-white border border-gray-200 rounded-xl shadow-sm ">
<div class="flex gap-x-4">
<svg class="flex-shrink-0 w-8 h-auto" width="72" height="63" viewBox="0 0 72 63" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.5174 56.1528C16.2903 57.6825 16.929 61.4559 14.8118 60.9459C13.5013 60.5381 11.4445 57.6213 12.493 56.1528C12.661 55.8468 13.2189 55.2757 14.106 55.4389" stroke="currentColor" class="" stroke-width="2" stroke-linecap="round" />
<path d="M15.5173 49.6263L14.0262 48.5579C13.5346 48.2056 12.8477 48.3707 12.658 48.945C12.3456 49.8907 12.1258 51.1463 12.462 52.2324C12.5336 52.4636 12.7127 52.6466 12.9449 52.7146C13.8342 52.9751 15.2568 52.9048 15.8197 51.054" stroke="currentColor" class="" stroke-width="2" stroke-linecap="round" />
<mask id="path-3-inside-1_4542_101166" fill="currentColor" class="text-gray-800 ">
<ellipse rx="1.09811" ry="0.738034" transform="matrix(0.921654 0.388014 -0.38048 0.924789 14.2069 43.4055)" />
</mask>
<path d="M13.3756 43.0555C13.6288 42.4402 14.1378 42.259 14.3273 42.2214C14.5316 42.1809 14.6503 42.223 14.687 42.2384L13.1651 45.9376C13.7607 46.1884 14.4484 46.2907 15.1206 46.1574C15.7781 46.0269 16.654 45.5999 17.0622 44.6076L13.3756 43.0555ZM14.687 42.2384C14.7237 42.2539 14.8369 42.3094 14.9524 42.4846C15.0596 42.6471 15.2913 43.1401 15.0381 43.7554L11.3515 42.2034C10.9432 43.1957 11.261 44.1253 11.6329 44.689C12.0131 45.2654 12.5694 45.6868 13.1651 45.9376L14.687 42.2384ZM15.0381 43.7554C14.7849 44.3708 14.2759 44.552 14.0864 44.5895C13.8821 44.6301 13.7634 44.588 13.7267 44.5725L15.2486 40.8734C14.653 40.6226 13.9653 40.5203 13.2931 40.6536C12.6357 40.784 11.7597 41.2111 11.3515 42.2034L15.0381 43.7554ZM13.7267 44.5725C13.69 44.5571 13.5768 44.5015 13.4613 44.3264C13.3541 44.1638 13.1225 43.6709 13.3756 43.0555L17.0622 44.6076C17.4705 43.6153 17.1527 42.6857 16.7809 42.1219C16.4007 41.5455 15.8443 41.1241 15.2486 40.8734L13.7267 44.5725Z" fill="black" mask="url(#path-3-inside-1_4542_101166)" />
<mask id="path-5-inside-2_4542_101166" fill="currentColor" class="text-gray-800 ">
<ellipse rx="1.00988" ry="1.0181" transform="matrix(0.921654 0.388014 -0.38048 0.924789 21.3702 57.2201)" />
</mask>
<path d="M20.4576 56.8359C20.6581 56.3486 21.2257 56.094 21.7438 56.312L20.2219 60.0112C21.768 60.6621 23.5159 59.9153 24.1442 58.388L20.4576 56.8359ZM21.7438 56.312C22.2618 56.5301 22.4832 57.1169 22.2827 57.6043L18.5961 56.0522C17.9677 57.5795 18.6757 59.3603 20.2219 60.0112L21.7438 56.312ZM22.2827 57.6043C22.0822 58.0916 21.5146 58.3462 20.9966 58.1281L22.5185 54.429C20.9724 53.7781 19.2245 54.5249 18.5961 56.0522L22.2827 57.6043ZM20.9966 58.1281C20.4785 57.9101 20.2571 57.3233 20.4576 56.8359L24.1442 58.388C24.7726 56.8607 24.0646 55.0799 22.5185 54.429L20.9966 58.1281Z" fill="black" mask="url(#path-5-inside-2_4542_101166)" />
<mask id="path-7-inside-3_4542_101166" fill="currentColor" class="text-gray-800 ">
<ellipse rx="1.00988" ry="1.0181" transform="matrix(0.921654 0.388014 -0.38048 0.924789 6.75397 38.8236)" />
</mask>
<path d="M5.84142 38.4394C6.04192 37.9521 6.60952 37.6975 7.12756 37.9156L5.60564 41.6147C7.15177 42.2656 8.89966 41.5188 9.52804 39.9915L5.84142 38.4394ZM7.12756 37.9156C7.6456 38.1337 7.86701 38.7205 7.66651 39.2078L3.9799 37.6557C3.35152 39.1831 4.05951 40.9638 5.60564 41.6147L7.12756 37.9156ZM7.66651 39.2078C7.46601 39.6951 6.89842 39.9498 6.38037 39.7317L7.90229 36.0325C6.35616 35.3816 4.60827 36.1284 3.9799 37.6557L7.66651 39.2078ZM6.38037 39.7317C5.86233 39.5136 5.64092 38.9268 5.84142 38.4394L9.52804 39.9915C10.1564 38.4642 9.44843 36.6834 7.90229 36.0325L6.38037 39.7317Z" fill="black" mask="url(#path-7-inside-3_4542_101166)" />
<path d="M31.6479 50.2383C31.5807 51.2241 32.1721 53.053 35.0756 52.4819" stroke="currentColor" class="" stroke-width="2" stroke-linecap="round" />
<path d="M50.9903 34.6769C50.1699 34.1428 48.3973 33.5907 47.8709 35.6552" stroke="currentColor" class="" stroke-width="2" stroke-linecap="round" />
<path d="M40.9087 17.4562C40.0882 16.9221 38.3156 16.37 37.7892 18.4345" stroke="currentColor" class="" stroke-width="2" stroke-linecap="round" />
<path d="M27.8502 29.3345C27.1279 29.998 26.1419 31.587 27.977 32.6357" stroke="currentColor" class="" stroke-width="2" stroke-linecap="round" />
<path d="M62.1917 19.585C62.4894 18.6451 62.5577 16.7703 60.4502 16.7902" stroke="currentColor" class="" stroke-width="2" stroke-linecap="round" />
<ellipse cx="51.2061" cy="22.3973" rx="3.02446" ry="3.05945" fill="currentColor" class="text-gray-800 " />
<path d="M67.7398 29.6361C68.8249 31.2826 67.6381 32.6215 66.8281 33.1457C66.7645 33.1869 66.695 33.2184 66.6214 33.2363C65.0504 33.618 63.6063 31.5388 63.6063 30.0441C63.6064 28.8034 66.3283 27.4945 67.7398 29.6361Z" fill="currentColor" class="text-gray-800 " />
<path d="M58.868 38.6126C57.9809 36.4914 54.6002 37.7288 53.0207 38.6126C51.7101 39.2284 52.0126 41.4681 53.6256 43.3038C54.9161 44.7723 56.5157 44.1196 57.1542 43.6097C58.0951 42.8279 59.7552 40.7339 58.868 38.6126Z" fill="currentColor" class="text-gray-800 " />
<path d="M5.85665 41.8048C5.21042 40.2694 2.74791 41.1651 1.59743 41.8048C0.642774 42.2505 0.863078 43.8717 2.03804 45.2004C2.978 46.2634 4.14317 45.7909 4.60826 45.4219C5.29365 44.8559 6.50288 43.3402 5.85665 41.8048Z" stroke="currentColor" class="" stroke-width="2" stroke-linecap="round" />
<path d="M45.4596 49.2172C40.9431 47.667 40.2844 51.6987 40.5196 53.9083C40.8221 55.3361 42.4351 55.54 43.4433 55.2341C45.5677 54.5894 51.1052 51.1548 45.4596 49.2172Z" fill="currentColor" class="text-gray-800 " />
<ellipse rx="2.96295" ry="3.45694" transform="matrix(0.855131 0.518411 -0.509711 0.860345 30.4996 41.3871)" fill="currentColor" class="text-gray-800 " />
<path d="M38.5032 29.1282C39.471 27.8228 37.8983 26.0687 36.991 25.3549C36.0836 24.6411 34.8335 24.8654 33.8657 26.1707C32.7567 27.6664 37.2934 30.7599 38.5032 29.1282Z" fill="currentColor" class="text-gray-800 " />
<path d="M19.2476 18.9295C16.4247 18.2768 15.7862 19.8813 15.8198 20.7652C16.0215 23.8246 20.5582 24.4365 21.6672 23.6207C22.4364 23.0548 22.7761 19.7453 19.2476 18.9295Z" fill="currentColor" class="text-gray-800 " />
<path d="M36.6888 6.79381C35.6403 4.67259 33.2947 5.02613 32.2529 5.46805C28.7042 6.61025 29.3292 8.52749 30.1358 9.13938C31.3456 10.1252 34.2289 12.0153 36.0839 11.6889C38.4027 11.281 37.9994 9.44533 36.6888 6.79381Z" fill="currentColor" class="text-gray-800 " />
<path d="M56.9526 54.9284C57.7592 53.5006 60.2795 51.0735 65.1187 49.9313C66.0596 49.7953 67.9818 48.5647 68.1431 44.7302C68.3448 39.9371 73.5872 32.9003 69.3529 28.1072C67.5382 26.053 68.4456 23.2121 67.5382 17.7051" stroke="currentColor" class="" stroke-width="2" stroke-linecap="round" />
<path d="M66.7316 16.176C65.1521 14.2383 60.6625 9.8939 55.3394 8.01743C48.703 5.67797 55.8063 4.55591 44.1399 4.75246C44.0816 4.75344 44.0194 4.76029 43.9617 4.76836C43.019 4.90008 40.5102 4.51266 37.2614 1.95295C37.2161 1.91728 37.1681 1.88406 37.1153 1.86091C36.6 1.63502 35.1744 1.43154 32.9584 2.2045C30.6195 3.02036 24.0531 5.46791 21.0622 6.58971C20.4237 6.92965 19.0056 8.05825 18.441 9.85312C17.7353 12.0967 5.93991 23.5187 9.56927 28.9237" stroke="currentColor" class="" stroke-width="2" stroke-linecap="round" />
<path d="M10.4768 30.1484C11.9084 30.3333 14.621 31.3895 15.0562 34.1372C15.1369 34.6464 15.5068 35.0847 16.0079 35.2063C18.8253 35.8904 22.6446 38.4014 20.8122 44.4603C20.7218 44.7592 20.7652 45.0847 20.9158 45.3583C21.7327 46.8422 22.367 49.4462 20.6725 51.7386C20.1262 52.4776 20.4167 53.842 21.2912 54.1243C23.3727 54.7962 25.8398 55.985 27.2662 57.833C27.5533 58.2049 28.0338 58.3932 28.4956 58.3062C30.4142 57.9446 33.9492 57.9776 37.2937 60.233C42.1328 63.4964 42.3345 60.0291 48.6858 60.7429C53.7669 61.314 55.7765 58.3294 56.1462 56.7656" stroke="currentColor" class="" stroke-width="2" stroke-linecap="round" />
</svg>
<p class="text-sm text-hs2-text ">
By browsing this website, you accept our <a class="inline-flex items-center gap-x-1.5 text-hs2-link hover:text-hs2-hover-state decoration-2 hover:underline font-medium" href="#">Cookies Policy</a>
</p>
<div>
<button type="button" class="inline-flex rounded-full p-2 text-white bg-hs2-danger hover:bg-hs2-danger-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-50 focus:ring-hs2-danger " data-hs-remove-element="#cookies-simple-icon-and-with-dismiss-button">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z" fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<!-- End Card -->
</div>
</div>Scrollable content with collapse
Open this scrollable content with collapse cookie banners example in new window
Copy scrollable content with collapse cookie banners code
Close scrollable content with collapse cookie banners code
<div class="min-h-[35rem]">
<div class="fixed inset-0 z-[60] sm:max-w-lg w-full mx-auto p-6">
<!-- Card -->
<div class="bg-white rounded-xl shadow-2xl ">
<div class="p-4 md:p-6 h-[30rem] overflow-x-hidden overflow-y-auto">
<h2 class="text-lg sm:text-xl font-semibold text-hs2-text ">
Allow the use of cookies?
</h2>
<p class="mt-3 text-sm text-hs2-text ">
We use cookies and similar technologies to help:
</p>
<div class="mt-4 space-y-5">
<!-- Icon Block -->
<div class="flex gap-x-5">
<svg class="flex-shrink-0 mt-1 w-5 h-5 text-hs2-text " xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 1a2 2 0 0 1 2 2v2H6V3a2 2 0 0 1 2-2zm3 4V3a3 3 0 1 0-6 0v2H3.36a1.5 1.5 0 0 0-1.483 1.277L.85 13.13A2.5 2.5 0 0 0 3.322 16h9.355a2.5 2.5 0 0 0 2.473-2.87l-1.028-6.853A1.5 1.5 0 0 0 12.64 5H11zm-1 1v1.5a.5.5 0 0 0 1 0V6h1.639a.5.5 0 0 1 .494.426l1.028 6.851A1.5 1.5 0 0 1 12.678 15H3.322a1.5 1.5 0 0 1-1.483-1.723l1.028-6.851A.5.5 0 0 1 3.36 6H5v1.5a.5.5 0 1 0 1 0V6h4z" />
</svg>
<div class="grow">
<p class="text-sm text-hs2-text ">
Provide and improve content on Htmlstream Products
</p>
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="flex gap-x-5">
<svg class="flex-shrink-0 mt-1 w-5 h-5 text-hs2-text " xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M13 2.5a1.5 1.5 0 0 1 3 0v11a1.5 1.5 0 0 1-3 0v-.214c-2.162-1.241-4.49-1.843-6.912-2.083l.405 2.712A1 1 0 0 1 5.51 15.1h-.548a1 1 0 0 1-.916-.599l-1.85-3.49a68.14 68.14 0 0 0-.202-.003A2.014 2.014 0 0 1 0 9V7a2.02 2.02 0 0 1 1.992-2.013 74.663 74.663 0 0 0 2.483-.075c3.043-.154 6.148-.849 8.525-2.199V2.5zm1 0v11a.5.5 0 0 0 1 0v-11a.5.5 0 0 0-1 0zm-1 1.35c-2.344 1.205-5.209 1.842-8 2.033v4.233c.18.01.359.022.537.036 2.568.189 5.093.744 7.463 1.993V3.85zm-9 6.215v-4.13a95.09 95.09 0 0 1-1.992.052A1.02 1.02 0 0 0 1 7v2c0 .55.448 1.002 1.006 1.009A60.49 60.49 0 0 1 4 10.065zm-.657.975 1.609 3.037.01.024h.548l-.002-.014-.443-2.966a68.019 68.019 0 0 0-1.722-.082z" />
</svg>
<div class="grow">
<p class="text-sm text-hs2-text ">
Provide a safer experience by using information that we receive from cookies on and off Preline
</p>
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="flex gap-x-5">
<svg class="flex-shrink-0 mt-1 w-5 h-5 text-hs2-text " xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z" />
</svg>
<div class="grow">
<p class="text-sm text-hs2-text ">
Provide and improve Htmlstream Products for people who have an account
</p>
</div>
</div>
<!-- End Icon Block -->
</div>
<p class="mt-4 text-sm text-hs2-text ">
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-hs2-text ">
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-hs2-link hover:text-hs2-hover-state decoration-2 hover:underline font-medium" href="#">Cookies Policy</a>.
</p>
<div class="mt-5 divide-y divide-gray-200 ">
<!-- Collapse -->
<div class="py-4 first:pt-0 last:pb-0">
<div class="hs-collapse-toggle flex justify-between items-center gap-x-5 font-semibold text-hs2-text cursor-pointer " id="hs-essential-cookie-collapse" data-hs-collapse="#hs-essential-cookie-collapse-heading">
Essential cookies
<svg class="hs-collapse-open:rotate-180 w-3 h-3" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</div>
<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">
<p class="mt-2 text-sm text-hs2-text ">
These cookies are required to use Htmlstream Products. They're necessary for these sites to work as intended.
</p>
</div>
</div>
<!-- End Collapse -->
<!-- Collapse -->
<div class="py-4 first:pt-0 last:pb-0">
<div class="hs-collapse-toggle flex justify-between items-center gap-x-5 font-semibold text-hs2-text cursor-pointer " id="hs-optional-cookie-collapse" data-hs-collapse="#hs-optional-cookie-collapse-heading">
Optional cookies
<svg class="hs-collapse-open:rotate-180 w-3 h-3" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</div>
<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">
<p class="mt-2 text-sm text-hs2-text ">
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.5 text-sm text-hs2-link hover:text-hs2-hover-state decoration-2 hover:underline font-medium" href="#">
More information
</a></p>
</div>
</div>
<!-- End Collapse -->
</div>
</div>
<!-- Footer -->
<div class="flex border-t border-gray-200 divide-x divide-gray-200 ">
<a class="w-full py-3 px-4 inline-flex justify-center items-center gap-2 rounded-bl-xl font-medium bg-white text-hs2-primary shadow-sm align-middle hover:bg-hs2-primary hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-hs2-primary transition-all text-sm sm:p-4 " href="#">
Only essentials
</a>
<a class="w-full py-3 px-4 inline-flex justify-center items-center gap-2 rounded-br-xl font-medium text-hs2-success hover:bg-hs2-success hover:text-white focus:outline-none focus:ring-2 ring-offset-white focus:ring-hs2-success focus:ring-offset-2 transition-all text-sm " href="#">
Allow all
</a>
</div>
<!-- End Footer -->
</div>
<!-- End Card -->
</div>
</div>