Cookie Consent Banner Doesn't Display

[fluxcap1]

I'm trying to set up cookie consent for the Tailwindcss v2 website. Here is my relevant html code:

<section id="cookie-banner" class="overflow-hidden z-30 fixed max-w-2xl p-4 mx-auto bg-white border border-gray-200 md:gap-x-4 left-12 bottom-16 dark:bg-gray-900 md:flex md:items-cente$ <div class="flex items-center gap-x-4"> <span class="inline-flex p-2 text-blue-500 rounded-lg shrink-0 dark:bg-gray-800 bg-blue-100/80"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" id="IconChangeColor" height="20" width="20"> <rect width="256" height="256" fill="none"></rect> <path d="M224,127.4a95.6,95.6,0,0,1-28.2,68.5c-36.9,36.9-97.3,37.3-134.7.9A96,96,0,0,1,128.6,32a8.1,8.1,0,0,1,7.8,9.8,32,32,0,0,0,30.8,39,8,8,0,0,1,8,8,32,32,0,0,0,39,30.8A8.1,$ <circle cx="156" cy="172" r="10"></circle> <circle cx="92" cy="164" r="10"></circle> <circle cx="84" cy="108" r="10"></circle> <circle cx="136" cy="124" r="10"></circle> </svg> </span> <p class="text-sm text-gray-600 dark:text-gray-300">We use cookies to provide you with the best possible experience on our website.</p> </div> <div class="flex items-center mt-6 gap-x-4 shrink-0 lg:mt-0"> <button id="cookie-agree" class="bg-red-600 duration-300 focus:outline-none font-medium px-4 py-2.5 rounded-lg text-white text-xs transition-colors w-1/2 md:w-auto"> OKAY </button> </div> </section>

Javascript bit : https://paste.debian.net/1310780/

The page loads fine, there are no errors. Please help me understand why it isn't working.

[fluxcap1]

I got it to work by reusing the components from the template; it's not the best solution, but it works for now.

<!-- ====== Cookies Consent Banner Start ====== --> <div id="cookieConsentContainer" class="inline-flex items-center gap-[10px] py-2 px-[14px] rounded-lg bg-white dark:bg-dark-2 shadow-2 fixed bottom-8 left-4 sm:left-9 z-[999]"> <span class="text-base font-medium text-dark-3 dark:text-dark-6"> We use cookies to provide you with the best possible experience on our website. </span> <span class="block w-px h-4 bg-stroke dark:bg-dark-3"></span> <span class="block max-w-[88px] w-full"> <button id="acceptCookies" type="button" class="rounded-md py-2 px-6 hover:bg-blue-500 transition-colors dark:text-white" style="background-color: #1821e4 !important; color: white !important;">OKAY!</button> </span> </div> <!-- ====== Cookies Consent Banner End ====== -->

Javascript - https://paste.debian.net/1310899/