Video Background with tailwind css and react js

hero-section.tsx

import React from 'react'

const HeroSection = () => {
    return (
        <section className="relative overflow-hidden w-full h-screen mx-0">


            <div
                className="mx-auto z-40 max-w-7xl lg:px-16 md:px-12 px-8 xl:px-24 py-24 items-center">
                <div className="items-start gap-12 grid grid-cols-1 md:grid-cols-2">
                    <div>
                        <div>
                            <h2 className="inline-flex items-center text-blue-600 opacity-0">
                                <span className="text-base font-medium tracking-tight">...take charge</span>
                            </h2>
                            <h2
                                className="text-white fade-in-up font-bold mt-6 text-4xl lg:text-7xl tracking-tighter">
                                The Money card for the Ambitious
                                {/* <span className="lg:block pl-2"></span> */}
                            </h2>
                            <p className="text-slate-200 mt-5 fade-in-up">
                                Send pocket money directly to your child's smart card, All withdraws are FREE, Manage their expenses by setting a withdraw limit.
                            </p>
                        </div>
                        <div className="mt-10 flex flex-wrap gap-3 fade-in-up">

                            <a
                                className="text-white items-center font-medium gap-3 inline-flex focus-visible:outline-2 focus-visible:outline-offset-2 focus:outline-none justify-center px-6 lg:px-8 ring-2 ring-transparent focus:ring-offset-2 focus:ring-blue-500 duration-200 py-3.5 rounded-full active:bg-blue-800 active:text-white bg-blue-500 hover:bg-blue-600 w-auto"
                                href="https://apps.apple.com/ug/app/kawu/id1639007286">
                                Order A Card
                            </a>
                        </div>
                    </div>

                    <div className="lg:mt-0 mt-12 lg:ml-auto">
                        <div className="max-w-[366px] relative">
                            {/* <img
                                className="drop-shadow-2xl rotate-6 debug"
                                src="/images/blue-card.png"
                                alt="thumbnail"
                            />
                            <img
                                src="/images/black-card.png"
                                alt="thumbnail"
                                className="-mt-12 lg:-ml-24 -rotate-6 drop-shadow-2xl debug"
                            /><img
                            src="/images/blue-card.png"
                              alt="thumbnail"
                                className="-mt-12 lg:-mr-24 rotate-6 drop-shadow-2xl debug"
                            /> */}
                            {/* <img
                                className=" drop-shadow-2xl   rotate-[-60deg] "
                                src="/images/blue-card.png"
                                alt="thumbnail"
                            />
                            <img
                                src="/images/black-card.png"
                                alt="thumbnail"
                                className="absolute inset-0 -rotate-6 drop-shadow-2xl "
                            /><img
                                src="/images/blue-card.png"
                                alt="thumbnail"
                                className="absolute top-20 rotate-[60deg] drop-shadow-2xl "
                            /> */}
                        </div>
                    </div>

                </div>
            </div>
            
            {/* Video Section */}
            <div className="bg-black bg-opacity-50 -z-30 absolute inset-0 h-screen w-full" />

            <video autoPlay loop muted className="absolute -z-50 inset-0 w-full   h-screen object-cover"> <source
                src="https://res.cloudinary.com/kolynz-b/video/upload/v1714723188/7669651-hd_1920_1080_25fps_qaj6cj.mp4"
                type="video/mp4"
            />
            </video>
{/* Video Section */}

        </section>
    )
}

export default HeroSection