Tailwind How It Works Components in Cyber library

<section class="relative py-20 bg-gradient-to-br from-black via-gray-950 to-black">
  <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 items-center -mx-4">
      <div class="w-full lg:w-2/5 px-4 mb-12 lg:mb-0">
        <div class="relative">
          <img class="w-full h-full max-h-96 lg:max-h-full object-cover border-2 border-blue-400 border-opacity-30 hover:border-purple-500 transition-all duration-300 transform hover:scale-105" src="https://images.unsplash.com/photo-1506464253090-7af30fe60a71?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="" style="clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 20px 100%);">
          <div class="absolute inset-0 bg-gradient-to-br from-blue-400 via-purple-500 to-green-400 opacity-0 hover:opacity-10 transition-opacity duration-300" style="clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 20px 100%);"></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>
      </div>
      <div class="w-full lg:w-3/5 px-4">
        <div class="max-w-xl lg:ml-auto">
          <h2 class="mb-12 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading tracking-wider bg-gradient-to-r from-blue-400 via-purple-500 to-green-400 bg-clip-text text-transparent">QUANTUM PROTOCOL ARCHITECTURE </h2>
          <div class="flex flex-wrap -mx-4 -mb-10 lg:-mb-12">
            <div class="w-full md:w-1/2 px-4 mb-10 lg:mb-12">
              <div class="relative mb-4 group">
                <span class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-blue-400 to-purple-500 text-gray-950 font-bold text-xl leading-loose border-2 border-blue-400 hover:border-purple-500 transition-all duration-300 transform hover:scale-110 hover:animate-pulse" style="clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 8px 100%);">1</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>
              </div>
              <p class="text-lg text-gray-400 leading-loose">Initialize quantum encryption protocols. Establish secure neural pathways for data transmission across dimensional barriers.</p>
            </div>
            <div class="w-full md:w-1/2 px-4 mb-10 lg:mb-12">
              <div class="relative mb-4 group">
                <span class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-purple-500 to-green-400 text-gray-950 font-bold text-xl leading-loose border-2 border-purple-500 hover:border-green-400 transition-all duration-300 transform hover:scale-110 hover:animate-pulse" style="clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 8px 100%);">2</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>
              </div>
              <p class="text-lg text-gray-400 leading-loose">Execute matrix algorithms for real-time neural network optimization. Process infinite data streams simultaneously.</p>
            </div>
            <div class="w-full md:w-1/2 px-4 mb-10 lg:mb-12">
              <div class="relative mb-4 group">
                <span class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-green-400 to-blue-400 text-gray-950 font-bold text-xl leading-loose border-2 border-green-400 hover:border-blue-400 transition-all duration-300 transform hover:scale-110 hover:animate-pulse" style="clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 8px 100%);">3</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>
              </div>
              <p class="text-lg text-gray-400 leading-loose">Deploy advanced cybersecurity shields. Activate firewall matrices to protect against digital intrusions and viruses.</p>
            </div>
            <div class="w-full md:w-1/2 px-4 mb-10 lg:mb-12">
              <div class="relative mb-4 group">
                <span class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-blue-400 to-purple-500 text-gray-950 font-bold text-xl leading-loose border-2 border-blue-400 hover:border-purple-500 transition-all duration-300 transform hover:scale-110 hover:animate-pulse" style="clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 8px 100%);">4</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>
              </div>
              <p class="text-lg text-gray-400 leading-loose">Interface with global networks. Establish connection protocols for seamless integration across all digital platforms.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>