Tailwind Contact Components in Cyber library

<section class="relative pt-20 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 mb-12 lg:mb-20 relative z-10">
            <div class="flex flex-wrap items-center -mx-4">
                <div class="w-full lg:w-1/2 px-4 mb-8 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="text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-black font-heading tracking-wider bg-gradient-to-r from-blue-400 via-purple-500 to-green-400 bg-clip-text text-transparent animate-glitch">ESTABLISH CONNECTION</h2>
                    </div>
                </div>
                <div class="w-full lg:w-1/2 px-4">
                    <div class="hologram-effect p-6 rounded-lg border border-blue-400 border-opacity-30 animate-float relative">
                        <div class="absolute top-4 right-4 w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                        <h3 class="mb-1 text-2xl font-black font-heading tracking-wider text-blue-400">COORDINATES</h3>
                        <p class="mb-4 lg:mb-8 text-lg text-green-400 hover:text-blue-400 transition-colors duration-300">1686 GERALDINE LANE NEW YORK, NY 10013</p>
                        <h3 class="mb-1 text-2xl font-black font-heading tracking-wider text-purple-500">DATA CHANNELS</h3>
                        <p class="text-lg text-green-400 hover:text-blue-400 transition-colors duration-300">hello@wireframes.org</p>
                        <div class="absolute bottom-4 left-4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-75"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="relative">
            <div class="absolute inset-0 bg-gradient-to-r from-blue-400 via-purple-500 to-green-400 opacity-20"></div>
            <div class="relative hologram-effect border-t-2 border-b-2 border-blue-400 border-opacity-30">
                <img class="w-full h-96 object-cover opacity-60 hover:opacity-80 transition-opacity duration-300" src="cyber-assets/images/map.png" alt="">
                <div class="absolute inset-0 bg-gradient-to-br from-blue-400 via-purple-500 to-green-400 opacity-10"></div>
                <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                    <div class="w-16 h-16 bg-gradient-to-br from-blue-400 to-purple-500 rounded-full flex items-center justify-center relative animate-pulse-neon">
                        <div class="absolute inset-2 border-2 border-green-400 rounded-full animate-spin"></div>
                        <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                    </div>
                </div>
                <div class="absolute bottom-4 right-4 text-xs text-blue-400 bg-gray-950 bg-opacity-80 px-2 py-1 rounded border border-blue-400 border-opacity-30">
                    LOCATION LOCKED
                </div>
            </div>
        </div>
    </section>