Tailwind Portfolio 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="flex flex-wrap -mx-4">
                <div class="w-full lg:w-1/2 p-4">
                    <div class="relative group hologram-effect border border-blue-400 border-opacity-30 overflow-hidden animate-float hover:animate-pulse-neon transition-all duration-300" style="clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 20px 100%);">
                        <img class="w-full h-80 object-cover transform group-hover:scale-105 transition-transform duration-500" 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-br from-blue-400 via-purple-500 to-green-400 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></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="absolute inset-0 border-2 border-blue-400 opacity-0 group-hover:opacity-50 transform group-hover:rotate-1 transition-all duration-300"></div>
                    </div>
                </div>
                <div class="w-full lg:w-1/2 p-4">
                    <div class="relative group hologram-effect border border-purple-500 border-opacity-30 overflow-hidden animate-float hover:animate-pulse-neon transition-all duration-300" style="clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%);">
                        <img class="w-full h-80 object-cover transform group-hover:scale-105 transition-transform duration-500" 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-br from-purple-500 via-green-400 to-blue-400 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
                        <div class="absolute top-4 left-4 w-2 h-2 bg-purple-500 rounded-full animate-pulse"></div>
                        <div class="absolute bottom-4 right-4 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-150"></div>
                        <div class="absolute inset-0 border-2 border-purple-500 opacity-0 group-hover:opacity-50 transform group-hover:-rotate-1 transition-all duration-300"></div>
                    </div>
                </div>
                <div class="w-full md:w-1/3 p-4">
                    <div class="relative group hologram-effect border border-green-400 border-opacity-30 overflow-hidden animate-float hover:animate-pulse-neon transition-all duration-300" style="clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 100%, 15px 100%);">
                        <img class="w-full h-80 object-cover transform group-hover:scale-105 transition-transform duration-500" 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-br from-green-400 via-blue-400 to-purple-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></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="absolute inset-0 border-2 border-green-400 opacity-0 group-hover:opacity-50 transform group-hover:rotate-1 transition-all duration-300"></div>
                    </div>
                </div>
                <div class="w-full md:w-1/3 p-4">
                    <div class="relative group hologram-effect border border-blue-400 border-opacity-30 overflow-hidden animate-float hover:animate-pulse-neon transition-all duration-300" style="clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);">
                        <img class="w-full h-80 object-cover transform group-hover:scale-105 transition-transform duration-500" 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-br from-blue-400 via-green-400 to-purple-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
                        <div class="absolute top-4 left-4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
                        <div class="absolute bottom-4 right-4 w-1 h-1 bg-purple-500 rounded-full animate-pulse delay-150"></div>
                        <div class="absolute inset-0 border-2 border-blue-400 opacity-0 group-hover:opacity-50 transform group-hover:-rotate-1 transition-all duration-300"></div>
                    </div>
                </div>
                <div class="w-full md:w-1/3 p-4">
                    <div class="relative group hologram-effect border border-purple-500 border-opacity-30 overflow-hidden animate-float hover:animate-pulse-neon transition-all duration-300" style="clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 100%, 15px 100%);">
                        <img class="w-full h-80 object-cover transform group-hover:scale-105 transition-transform duration-500" 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-br from-purple-500 via-blue-400 to-green-400 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
                        <div class="absolute top-4 right-4 w-2 h-2 bg-purple-500 rounded-full animate-pulse"></div>
                        <div class="absolute bottom-4 left-4 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
                        <div class="absolute inset-0 border-2 border-purple-500 opacity-0 group-hover:opacity-50 transform group-hover:rotate-1 transition-all duration-300"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>