<section 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="p-12 bg-gradient-to-br from-gray-800 to-gray-950 border border-blue-400 border-opacity-30 relative overflow-hidden" 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-5"></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 class="flex flex-wrap items-center -mx-4 relative z-10">
<div class="w-full md:w-1/2 px-4">
<div class="max-w-md lg:ml-auto mb-5 lg:mb-0">
<h3 class="mb-2 text-3xl font-black font-heading tracking-wider bg-gradient-to-r from-blue-400 via-purple-500 to-green-400 bg-clip-text text-transparent">SUBSCRIBE TO FEED</h3>
<p class="text-gray-400 text-sm tracking-wide">Interface with our data stream. Receive quantum-encrypted transmissions directly to your neural network.</p>
</div>
</div>
<div class="w-full md:w-1/2 px-4">
<form action="#">
<div class="flex max-w-md">
<input class="w-full pl-3 py-3 mr-3 bg-gray-950 border-2 border-blue-400 border-opacity-30 text-gray-200 placeholder-gray-500 text-sm focus:border-blue-400 focus:outline-none transition-all duration-300 hover:border-opacity-50" style="clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%);" type="email" placeholder="neural.interface@cyber.net">
<button class="group relative inline-block 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 overflow-hidden" style="clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%);">
<span class="relative z-10">EXECUTE</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>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
