Tailwind Footers Components in Cyber library

<footer class="py-20 relative">
  <div class="absolute inset-0 bg-gradient-to-br from-black via-gray-950 to-black"></div>
  <div class="absolute inset-0 opacity-20">
    <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
    <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
    <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
    <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
  </div>
  
  <div class="container px-4 mx-auto relative z-10">
    <div class="flex flex-wrap -mx-4 mb-8 lg:mb-16">
      <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
        <a class="text-blue-400 text-2xl leading-none font-heading tracking-wider hover:animate-glitch transition-all duration-300" href="#">
          <img src="cyber-assets/logo.png" alt="" class="h-4">
        </a>
        <p class="mt-5 mb-6 max-w-xs text-gray-400 leading-loose">Interface with next-gen protocols. Execute quantum algorithms. Breach the limitations of conventional systems.</p>
        <div>
          <a class="inline-block h-6 mr-8 text-blue-400 hover:text-purple-500 transition-all duration-300 transform hover:scale-110" href="#">
            <img class="mx-auto" src="cyber-assets/socials/facebook.svg">
          </a>
          <a class="inline-block h-6 mr-8 text-green-400 hover:text-blue-400 transition-all duration-300 transform hover:scale-110" href="#">
            <img class="mx-auto" src="cyber-assets/socials/github.svg">
          </a>
          <a class="inline-block h-6 mr-8 text-purple-500 hover:text-green-400 transition-all duration-300 transform hover:scale-110" href="#">
            <img class="mx-auto" src="cyber-assets/socials/instagram.svg">
          </a>
          <a class="inline-block h-6 mr-8 text-blue-400 hover:text-purple-500 transition-all duration-300 transform hover:scale-110" href="#">
            <img class="mx-auto" src="cyber-assets/socials/linkedin.svg">
          </a>
          <a class="inline-block h-6 text-green-400 hover:text-blue-400 transition-all duration-300 transform hover:scale-110" href="#">
            <img class="mx-auto" src="cyber-assets/socials/twitter.svg">
          </a>
        </div>
      </div>
      <div class="w-full lg:w-2/3 px-4">
        <div class="flex flex-wrap justify-between">
          <div class="w-1/2 lg:w-1/4 mb-8 lg:mb-0">
            <h3 class="mb-6 text-lg font-bold font-heading tracking-wider text-blue-400 bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">COMPANY</h3>
            <ul class="text-sm">
              <li class="mb-4"><a class="text-gray-400 hover:text-blue-400 tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                ABOUT US
                <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full"></span>
              </a></li>
              <li class="mb-4"><a class="text-gray-400 hover:text-purple-500 tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                CAREERS
                <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-purple-500 transition-all duration-300 group-hover:w-full"></span>
              </a></li>
              <li class="mb-4"><a class="text-gray-400 hover:text-green-400 tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                PRESS
                <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-green-400 transition-all duration-300 group-hover:w-full"></span>
              </a></li>
              <li><a class="text-gray-400 hover:text-blue-400 tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                BLOG
                <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full"></span>
              </a></li>
            </ul>
          </div>
          <div class="w-1/2 lg:w-1/4 mb-8 lg:mb-0">
            <h3 class="mb-6 text-lg font-bold font-heading tracking-wider text-purple-500 bg-gradient-to-r from-purple-500 to-green-400 bg-clip-text text-transparent">PAGES</h3>
            <ul class="text-sm">
              <li class="mb-4"><a class="text-gray-400 hover:text-blue-400 tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                LOGIN
                <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full"></span>
              </a></li>
              <li class="mb-4"><a class="text-gray-400 hover:text-purple-500 tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                REGISTER
                <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-purple-500 transition-all duration-300 group-hover:w-full"></span>
              </a></li>
              <li class="mb-4"><a class="text-gray-400 hover:text-green-400 tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                ADD LIST
                <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-green-400 transition-all duration-300 group-hover:w-full"></span>
              </a></li>
              <li><a class="text-gray-400 hover:text-blue-400 tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                CONTACT
                <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full"></span>
              </a></li>
            </ul>
          </div>
          <div class="w-1/2 lg:w-1/4 mb-8 lg:mb-0">
            <h3 class="mb-6 text-lg font-bold font-heading tracking-wider text-green-400 bg-gradient-to-r from-green-400 to-blue-400 bg-clip-text text-transparent">LEGAL</h3>
            <ul class="text-sm">
              <li class="mb-4"><a class="text-gray-400 hover:text-blue-400 tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                TERMS
                <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full"></span>
              </a></li>
              <li class="mb-4"><a class="text-gray-400 hover:text-purple-500 tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                ABOUT US
                <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-purple-500 transition-all duration-300 group-hover:w-full"></span>
              </a></li>
              <li class="mb-4"><a class="text-gray-400 hover:text-green-400 tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                TEAM
                <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-green-400 transition-all duration-300 group-hover:w-full"></span>
              </a></li>
              <li><a class="text-gray-400 hover:text-blue-400 tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                PRIVACY
                <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full"></span>
              </a></li>
            </ul>
          </div>
          <div class="w-1/2 lg:w-1/4">
            <h3 class="mb-6 text-lg font-bold font-heading tracking-wider text-blue-400 bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">RESOURCES</h3>
            <ul class="text-sm">
              <li class="mb-4"><a class="text-gray-400 hover:text-blue-400 tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                BLOG
                <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full"></span>
              </a></li>
              <li class="mb-4"><a class="text-gray-400 hover:text-purple-500 tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                SERVICE
                <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-purple-500 transition-all duration-300 group-hover:w-full"></span>
              </a></li>
              <li class="mb-4"><a class="text-gray-400 hover:text-green-400 tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                PRODUCT
                <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-green-400 transition-all duration-300 group-hover:w-full"></span>
              </a></li>
              <li><a class="text-gray-400 hover:text-blue-400 tracking-wider transition-all duration-300 hover:animate-pulse relative group" href="#">
                PRICING
                <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full"></span>
              </a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="border-t border-blue-400 border-opacity-20 pt-8">
      <p class="lg:text-center text-sm text-gray-500 tracking-wider">© 2025 CYBER SYSTEMS ACTIVATED. ALL RIGHTS RESERVED.</p>
    </div>
  </div>
</footer>