Newsletter Subscription - Copy this React, Tailwind Component to your project

<div className='layoutBox'> <div className="container items center flex flex wrap justify between items start "> {/* Left Section Logo and Socials */} <div className="mb 6 "> <Image className="py 4" src={lightLogo} height={90} alt="logo" priority /> <p className="font bold font sans">Follow us</p> <div className="flex space x 4 py 4"> <Link href="https://www.linkedin.com/" target="_blank" rel="noopener noreferrer"> <Image src="/linkedin.svg" alt="LinkedIn" width={10} height={10} /> </Link> <Link href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer"> <Image src="/instagram.svg" alt="Instagram" width={10} height={10} /> </Link> <Link href="https://discord.com/" target="_blank" rel="noopener noreferrer"> <Image src="/discord.svg" alt="Discord" width={10} height={10} /> </Link> </div> </div> {/* Middle Sections */} <div className="flex gap 16"> {/* Company */} <div> <h3 className="font semibold font sans text xl mb 4">Company</h3> <ul className="space y 2 leading 8 font sans text md text [#4F4F4F]"> <li><Link href="#">About Us</Link></li> <li><Link href="#">Events</Link></li> <li><Link href="#">Community <span className="text red 500">New</span></Link></li> <li><Link href="#">Jobs & Internship</Link></li> </ul> </div> {/* Resources */} <div> <h3 className="font semibold font sans text xl mb 4">Resources</h3> <ul className="space y 2 leading 8 font sans text md"> <li><Link href="#">Blogs <span className="text red 500">New</span></Link></li> <li><Link href="#">FAQs</Link></li> <li><Link href="#">Support</Link></li> </ul> </div> {/* Legal */} <div> <h3 className="font semibold font sans text xl mb 4">Legal</h3> <ul className="space y 2 leading 8 font sans text md"> <li><Link href="#">Terms of Service</Link></li> <li><Link href="#">PrivLinkcy Policy</Link></li> </ul> </div> </div> {/* Right Section Subscribe */} <div className="mt 6 md:mt 0"> <h3 className="font semibold font sans text xl mb 4">Stay up to date with Hackingly!</h3> <form className="flex space x 2"> <input type="email" placeholder="Enter your email address" className="w full py 2 px 4 rounded md border border gray 300 focus:outline none focus:ring 2 focus:ring green 600" /> <Button type="submit" className="py 2 px 6 bg green 600 text white rounded md hover:bg green 700" > Subscribe </Button> </form> </div> </div> {/* Footer Bottom */} <div className="my 6 border 2 flex items center text xs space x 32 font sans"> <div className='text start relative '> <p className=" font bold text lg ">Collaborate With Hackingly</p> <p className="text base text gray 600"> Empower Talent To Transform Ideas Into Impactful Innovations </p> </div> <div className='text center text gray 600 text sm'> <p>© 2024 Hackingly™. All Rights Reserved.</p> <p>Crafted with <span className="text red 500">❤</span> by Giby Technologies Private Limited</p> </div> </div> </div> in this above code i want that stay up t date with Hackingly waala section will be on the top