Tailwind Sign In / Sign Up Components in Cyber library

<section class="relative py-20 scan-lines">
  <div class="absolute inset-0 bg-gradient-to-br from-black via-gray-950 to-black"></div>
  <div class="absolute top-0 left-0 lg:bottom-0 h-96 lg:h-auto w-full lg:w-8/12 bg-gradient-to-br from-blue-400 via-purple-500 to-blue-400 opacity-20"></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="relative container px-4 mx-auto z-10">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
        <div class="max-w-lg relative">
          <div class="absolute -top-2 -left-2 w-full h-full border-2 border-blue-400 opacity-20 transform rotate-1 z-n1"></div>
          <h2 class="relative mb-6 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-black font-heading tracking-wider animate-glitch bg-gradient-to-r from-blue-400 via-purple-500 to-green-400 bg-clip-text text-transparent">SYSTEM ACCESS PROTOCOL INITIALIZED </h2>
          <p class="text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-400">Interface with quantum encryption matrices. Execute biometric validation sequences. Breach conventional security limitations through neural-net authentication protocols.</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="lg:max-w-md p-6 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-center rounded-lg border border-blue-400 border-opacity-30 hologram-effect animate-float relative">
          <div class="absolute inset-0 bg-gradient-to-br from-blue-400 via-purple-500 to-green-400 opacity-10 rounded-lg"></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>
          
          <form action="#" class="relative z-10">
            <span class="text-sm text-blue-400 font-semibold uppercase tracking-wider">NEURAL LINK</span>
            <h3 class="mb-6 text-2xl font-black font-heading tracking-wider bg-gradient-to-r from-green-400 to-blue-400 bg-clip-text text-transparent">SIGN IN</h3>
            
            <input class="w-full py-3 pl-3 mb-4 bg-gray-950 border-2 border-blue-400 border-opacity-30 rounded-lg text-blue-400 placeholder-gray-500 focus:border-blue-400 focus:outline-none transition-all duration-300" type="email" placeholder="ID@SYSTEM.NET">
            <input class="w-full py-3 pl-3 mb-4 bg-gray-950 border-2 border-purple-500 border-opacity-30 rounded-lg text-purple-500 placeholder-gray-500 focus:border-purple-500 focus:outline-none transition-all duration-300" type="password" placeholder="PASSWORD">
            
            <label class="inline-block mb-4 text-left">
              <input class="mr-2 accent-blue-400" type="checkbox" name="terms" value="1">
              <span class="text-sm text-gray-400">By connecting, you agree to our <a class="font-bold hover:underline text-blue-400 hover:text-purple-500 transition-colors duration-300" href="#">Cyber Protocol Terms</a> and <a class="font-bold hover:underline text-green-400 hover:text-blue-400 transition-colors duration-300" href="#">Data Matrix Policy</a>.</span>
            </label>
            
            <button class="group relative block w-full px-5 py-3 text-sm bg-gradient-to-r from-blue-400 to-purple-500 hover:from-purple-500 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" style="clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 100%, 15px 100%);">
              <span class="relative z-10">EXECUTE CONNECTION</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>
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>