Tailwind Blog Components in Cyber library

<section class="py-20 relative scan-lines">
  <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="max-w-lg lg:max-w-2xl mx-auto mb-12 text-center">
      <span class="text-xs font-semibold text-blue-400 uppercase tracking-wider animate-pulse">DATA STREAM</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 text-gray-50 bg-gradient-to-r from-blue-400 via-purple-500 to-green-400 bg-clip-text text-transparent tracking-wider">NEURAL NETWORK ARCHIVES</h2>
      <p class="text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-400">Access encrypted data streams from the quantum neural networks. Browse classified protocols and system archives.</p>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-4">
      <div class="w-full lg:w-2/3 px-4 mb-12">
        <div class="relative group hologram-effect p-1 rounded-lg border border-blue-400 border-opacity-30 animate-float">
          <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="flex h-96 mb-6 relative z-10">
            <img class="w-full h-full object-cover rounded-lg filter brightness-75 hover:brightness-100 transition-all duration-300" src="https://images.unsplash.com/photo-1581279219053-6c0ef420e10b?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
            <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-60 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>
          </div>
        </div>
        <span class="text-xs font-bold text-green-400 tracking-wider">TIMESTAMP: 2085.06.10 19:40</span>
        <h2 class="mt-2 mb-2 text-3xl font-bold font-heading text-gray-50 hover:text-blue-400 transition-colors duration-300 tracking-wider">QUANTUM BREACH PROTOCOLS</h2>
        <p class="max-w-2xl mb-4 text-lg text-gray-400 leading-loose">Advanced neural interface protocols for quantum system penetration. Execute precision algorithms for dimensional data extraction.</p>
        <a class="group flex items-center text-lg font-bold text-blue-400 hover:text-purple-500 transition-all duration-300 tracking-wider" href="#">
          <span>ACCESS DATA</span>
          <span class="ml-2 transform group-hover:translate-x-1 transition-transform duration-300">
            <svg class="w-5 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
          </span>
          <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>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-12">
        <div class="relative group hologram-effect p-1 rounded-lg border border-purple-500 border-opacity-30 hover:border-opacity-60 transition-all duration-300">
          <div class="absolute inset-0 bg-gradient-to-br from-purple-500 via-blue-400 to-green-400 opacity-10 rounded-lg"></div>
          <div class="flex h-96 mb-6 relative z-10">
            <img class="w-full h-full object-cover rounded-lg filter brightness-75 hover:brightness-100 transition-all duration-300" 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="">
            <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-60 rounded-lg"></div>
            <div class="absolute top-4 right-4 w-2 h-2 bg-purple-500 rounded-full animate-pulse"></div>
          </div>
        </div>
        <span class="text-xs font-bold text-green-400 tracking-wider">TIMESTAMP: 2085.06.10 19:40</span>
        <h2 class="mt-2 mb-2 text-3xl font-bold font-heading text-gray-50 hover:text-purple-500 transition-colors duration-300 tracking-wider">NEURAL LINK</h2>
        <p class="mb-4 text-lg text-gray-400 leading-loose">Interface with cybernetic consciousness networks.</p>
        <a class="group flex items-center text-lg font-bold text-purple-500 hover:text-green-400 transition-all duration-300 tracking-wider relative" href="#">
          <span>ACCESS DATA</span>
          <span class="ml-2 transform group-hover:translate-x-1 transition-transform duration-300">
            <svg class="w-5 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
          </span>
          <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>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-12">
        <div class="relative group hologram-effect p-1 rounded-lg border border-green-400 border-opacity-30 hover:border-opacity-60 transition-all duration-300">
          <div class="absolute inset-0 bg-gradient-to-br from-green-400 via-blue-400 to-purple-500 opacity-10 rounded-lg"></div>
          <div class="flex h-96 mb-6 relative z-10">
            <img class="w-full h-full object-cover rounded-lg filter brightness-75 hover:brightness-100 transition-all duration-300" src="https://images.unsplash.com/photo-1458080464185-b0ebf9ede5cb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
            <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-60 rounded-lg"></div>
            <div class="absolute top-4 right-4 w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
          </div>
        </div>
        <span class="text-xs font-bold text-green-400 tracking-wider">TIMESTAMP: 2085.06.10 19:40</span>
        <h2 class="mt-2 mb-2 text-3xl font-bold font-heading text-gray-50 hover:text-green-400 transition-colors duration-300 tracking-wider">MATRIX CODE</h2>
        <p class="mb-4 text-lg text-gray-400 leading-loose">Decrypt the fundamental algorithms of reality.</p>
        <a class="group flex items-center text-lg font-bold text-green-400 hover:text-blue-400 transition-all duration-300 tracking-wider relative" href="#">
          <span>ACCESS DATA</span>
          <span class="ml-2 transform group-hover:translate-x-1 transition-transform duration-300">
            <svg class="w-5 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
          </span>
          <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>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-12">
        <div class="relative group hologram-effect p-1 rounded-lg border border-blue-400 border-opacity-30 hover:border-opacity-60 transition-all duration-300">
          <div class="absolute inset-0 bg-gradient-to-br from-blue-400 via-green-400 to-purple-500 opacity-10 rounded-lg"></div>
          <div class="flex h-96 mb-6 relative z-10">
            <img class="w-full h-full object-cover rounded-lg filter brightness-75 hover:brightness-100 transition-all duration-300" src="https://images.unsplash.com/photo-1458080767772-b1011d305557?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1043&amp;q=80" alt="">
            <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-60 rounded-lg"></div>
            <div class="absolute top-4 right-4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
          </div>
        </div>
        <span class="text-xs font-bold text-green-400 tracking-wider">TIMESTAMP: 2085.06.10 19:40</span>
        <h2 class="mt-2 mb-2 text-3xl font-bold font-heading text-gray-50 hover:text-blue-400 transition-colors duration-300 tracking-wider">CYBER DEFENSE</h2>
        <p class="mb-4 text-lg text-gray-400 leading-loose">Activate advanced firewall protocols and shields.</p>
        <a class="group flex items-center text-lg font-bold text-blue-400 hover:text-purple-500 transition-all duration-300 tracking-wider relative" href="#">
          <span>ACCESS DATA</span>
          <span class="ml-2 transform group-hover:translate-x-1 transition-transform duration-300">
            <svg class="w-5 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
          </span>
          <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>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-12">
        <div class="relative group hologram-effect p-1 rounded-lg border border-purple-500 border-opacity-30 hover:border-opacity-60 transition-all duration-300">
          <div class="absolute inset-0 bg-gradient-to-br from-purple-500 via-green-400 to-blue-400 opacity-10 rounded-lg"></div>
          <div class="flex h-96 mb-6 relative z-10">
            <img class="w-full h-full object-cover rounded-lg filter brightness-75 hover:brightness-100 transition-all duration-300" src="https://images.unsplash.com/photo-1581279219053-6c0ef420e10b?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
            <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-60 rounded-lg"></div>
            <div class="absolute top-4 right-4 w-2 h-2 bg-purple-500 rounded-full animate-pulse"></div>
          </div>
        </div>
        <span class="text-xs font-bold text-green-400 tracking-wider">TIMESTAMP: 2085.06.10 19:40</span>
        <h2 class="mt-2 mb-2 text-3xl font-bold font-heading text-gray-50 hover:text-purple-500 transition-colors duration-300 tracking-wider">GHOST PROTOCOL</h2>
        <p class="mb-4 text-lg text-gray-400 leading-loose">Execute stealth operations in digital dimensions.</p>
        <a class="group flex items-center text-lg font-bold text-purple-500 hover:text-green-400 transition-all duration-300 tracking-wider relative" href="#">
          <span>ACCESS DATA</span>
          <span class="ml-2 transform group-hover:translate-x-1 transition-transform duration-300">
            <svg class="w-5 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
          </span>
          <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>
      </div>
    </div>
  </div>
</section>