Tailwind Team 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="max-w-3xl mx-auto mb-12 lg:mb-16 text-center">
      <span class="text-xs font-semibold text-blue-400 uppercase tracking-wider animate-pulse">NEURAL NETWORK</span>
      <h2 class="mt-2 mb-4 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">DIGITAL OPERATIVES MATRIX</h2>
      <p class="text-lg text-gray-400 leading-loose">Interface with our elite cybernetic team. Each operative specializes in quantum protocols and system infiltration algorithms.</p>
    </div>
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="group relative flex items-center justify-center bg-gradient-to-br from-gray-800 to-gray-950 py-12 border border-blue-400 border-opacity-20 hover:border-opacity-60 transition-all duration-300 transform hover:scale-105 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-0 group-hover:opacity-10 transition-opacity duration-300"></div>
          <div class="text-center relative z-10">
            <div class="relative w-20 h-20 mx-auto mb-6">
              <img class="w-20 h-20 mx-auto rounded-full border-2 border-blue-400 p-1" src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=8&amp;w=300&amp;h=300&amp;q=80" alt="">
              <div class="absolute -top-1 -right-1 w-4 h-4 bg-green-400 rounded-full animate-pulse"></div>
            </div>
            <h3 class="mb-1 text-2xl font-bold font-heading text-blue-400 tracking-wider">AGENT BAILEY</h3>
            <p class="text-lg text-gray-400 text-sm">SYSTEM ARCHITECT</p>
          </div>
          <div class="absolute top-4 right-4 w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="group relative flex items-center justify-center bg-gradient-to-br from-gray-800 to-gray-950 py-12 border border-purple-500 border-opacity-20 hover:border-opacity-60 transition-all duration-300 transform hover:scale-105 animate-float delay-75" 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-purple-500 via-blue-400 to-green-400 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
          <div class="text-center relative z-10">
            <div class="relative w-20 h-20 mx-auto mb-6">
              <img class="w-20 h-20 mx-auto rounded-full border-2 border-purple-500 p-1" src="https://images.unsplash.com/photo-1618641986557-1ecd230959aa?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHw1fHxwcm9maWxlfGVufDB8fHx8MTc0ODE4MjA2N3ww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=300&amp;w=300" alt="">
              <div class="absolute -top-1 -right-1 w-4 h-4 bg-green-400 rounded-full animate-pulse"></div>
            </div>
            <h3 class="mb-1 text-2xl font-bold font-heading text-purple-500 tracking-wider">AGENT BAILEY</h3>
            <p class="text-lg text-gray-400 text-sm">PROTOCOL ENGINEER</p>
          </div>
          <div class="absolute top-4 right-4 w-2 h-2 bg-purple-500 rounded-full animate-pulse"></div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="group relative flex items-center justify-center bg-gradient-to-br from-gray-800 to-gray-950 py-12 border border-green-400 border-opacity-20 hover:border-opacity-60 transition-all duration-300 transform hover:scale-105 animate-float delay-150" 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-green-400 via-blue-400 to-purple-500 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
          <div class="text-center relative z-10">
            <div class="relative w-20 h-20 mx-auto mb-6">
              <img class="w-20 h-20 mx-auto rounded-full border-2 border-green-400 p-1" src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=8&amp;w=300&amp;h=300&amp;q=80" alt="">
              <div class="absolute -top-1 -right-1 w-4 h-4 bg-green-400 rounded-full animate-pulse"></div>
            </div>
            <h3 class="mb-1 text-2xl font-bold font-heading text-green-400 tracking-wider">AGENT BAILEY</h3>
            <p class="text-lg text-gray-400 text-sm">DATA SPECIALIST</p>
          </div>
          <div class="absolute top-4 right-4 w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="group relative flex items-center justify-center bg-gradient-to-br from-gray-800 to-gray-950 py-12 border border-blue-400 border-opacity-20 hover:border-opacity-60 transition-all duration-300 transform hover:scale-105 animate-float delay-300" 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-green-400 to-purple-500 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
          <div class="text-center relative z-10">
            <div class="relative w-20 h-20 mx-auto mb-6">
              <img class="w-20 h-20 mx-auto rounded-full border-2 border-blue-400 p-1" src="https://images.unsplash.com/photo-1618641986557-1ecd230959aa?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHw1fHxwcm9maWxlfGVufDB8fHx8MTc0ODE4MjA2N3ww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=300&amp;w=300" alt="">
              <div class="absolute -top-1 -right-1 w-4 h-4 bg-green-400 rounded-full animate-pulse"></div>
            </div>
            <h3 class="mb-1 text-2xl font-bold font-heading text-blue-400 tracking-wider">AGENT BAILEY</h3>
            <p class="text-lg text-gray-400 text-sm">QUANTUM ANALYST</p>
          </div>
          <div class="absolute top-4 right-4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="group relative flex items-center justify-center bg-gradient-to-br from-gray-800 to-gray-950 py-12 border border-purple-500 border-opacity-20 hover:border-opacity-60 transition-all duration-300 transform hover:scale-105 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-purple-500 via-green-400 to-blue-400 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
          <div class="text-center relative z-10">
            <div class="relative w-20 h-20 mx-auto mb-6">
              <img class="w-20 h-20 mx-auto rounded-full border-2 border-purple-500 p-1" src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=8&amp;w=300&amp;h=300&amp;q=80" alt="">
              <div class="absolute -top-1 -right-1 w-4 h-4 bg-green-400 rounded-full animate-pulse"></div>
            </div>
            <h3 class="mb-1 text-2xl font-bold font-heading text-purple-500 tracking-wider">AGENT BAILEY</h3>
            <p class="text-lg text-gray-400 text-sm">NEURAL OPERATIVE</p>
          </div>
          <div class="absolute top-4 right-4 w-2 h-2 bg-purple-500 rounded-full animate-pulse"></div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="group relative flex items-center justify-center bg-gradient-to-br from-gray-800 to-gray-950 py-12 border border-green-400 border-opacity-20 hover:border-opacity-60 transition-all duration-300 transform hover:scale-105 animate-float delay-75" 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-green-400 via-purple-500 to-blue-400 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
          <div class="text-center relative z-10">
            <div class="relative w-20 h-20 mx-auto mb-6">
              <img class="w-20 h-20 mx-auto rounded-full border-2 border-green-400 p-1" src="https://images.unsplash.com/photo-1618641986557-1ecd230959aa?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHw1fHxwcm9maWxlfGVufDB8fHx8MTc0ODE4MjA2N3ww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=300&amp;w=300" alt="">
              <div class="absolute -top-1 -right-1 w-4 h-4 bg-green-400 rounded-full animate-pulse"></div>
            </div>
            <h3 class="mb-1 text-2xl font-bold font-heading text-green-400 tracking-wider">AGENT BAILEY</h3>
            <p class="text-lg text-gray-400 text-sm">CYBER COMMANDER</p>
          </div>
          <div class="absolute top-4 right-4 w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
        </div>
      </div>
    </div>
  </div>
</section>