Tailwind Cookies Components in Cyber library

<div class="fixed bottom-0 inset-x-0 z-50 scan-lines" x-data="{ open: true }" :class="{ 'hidden': !open }">
        <div class="absolute inset-0 bg-gradient-to-br from-black via-gray-950 to-black opacity-95"></div>
        <div class="absolute inset-0 opacity-20">
            <div class="absolute top-10 left-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse"></div>
            <div class="absolute top-20 right-1/3 w-2 h-2 bg-green-400 rounded-full animate-pulse delay-75"></div>
            <div class="absolute bottom-10 left-1/3 w-1 h-1 bg-purple-500 rounded-full animate-pulse delay-150"></div>
            <div class="absolute bottom-20 right-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse delay-300"></div>
        </div>
        
        <div class="container px-4 mx-auto mt-8 relative z-10">
            <div class="relative p-8 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-950 border-2 border-blue-400 border-opacity-30 animate-float" style="clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));">
                <div class="absolute inset-0 bg-gradient-to-br from-blue-400 via-purple-500 to-green-400 opacity-5"></div>
                <div class="absolute top-4 right-4 w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                <div class="absolute bottom-4 left-4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-75"></div>
                
                <div class="relative z-10">
                    <h3 class="mb-2 text-2xl font-bold font-heading tracking-wider animate-glitch bg-gradient-to-r from-blue-400 via-purple-500 to-green-400 bg-clip-text text-transparent">COOKIE PROTOCOL</h3>
                    <p class="mb-8 text-gray-400 leading-loose text-sm lg:text-base">We use cookies to personalise content, 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. If you want to change your cookie setting, please see the 'how to reject cookies' section of our . Otherwise, if you agree to our use of cookies, please continue to use our website.</p>
                    
                    <div class="flex flex-col sm:flex-row gap-4">
                        <a x-on:click.prevent="open=false" class="group relative px-6 py-3 text-sm text-center bg-gradient-to-r from-green-400 to-blue-400 hover:from-blue-400 hover:to-green-400 text-gray-950 font-semibold tracking-wider transition-all duration-300 transform hover:scale-105 hover:animate-pulse-neon overflow-hidden" href="#" style="clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%);">
                            <span class="relative z-10">ALLOW ACCESS</span>
                            <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-0 group-hover:opacity-20 transform -skew-x-12 group-hover:translate-x-full transition-all duration-700"></div>
                        </a>
                        
                        <a x-on:click.prevent="open=false" class="group relative px-6 py-3 text-sm text-center font-semibold text-purple-500 hover:text-gray-950 hover:bg-purple-500 border-2 border-purple-500 transition-all duration-300 transform hover:scale-105 overflow-hidden" href="#" style="clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);">
                            <span class="relative z-10">DENY PROTOCOL</span>
                            <div class="absolute inset-0 bg-purple-500 transform translate-x-full group-hover:translate-x-0 transition-transform duration-300"></div>
                        </a>
                    </div>
                </div>
                
                <div class="absolute -top-1 -left-1 w-full h-full border border-blue-400 opacity-10 transform rotate-1" style="clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));"></div>
            </div>
        </div>
    </div>