Cannot get intersection observor to identify when elements intersect in a tailwind project

Ive tried numerous ways but I cannot seem to get the intersection observor to identify and console log when entries are appearing in the screen. Please help.

<div class="element relative w-full h-max flex justify-end items-center">
                    <div class="w-full md:w-1/2 lg:w-2/5 h-1/3 px-px md:px-0 md:h-full overflow-hidden absolute bottom-0 md:left-0 md:rounded">
                        <video class="w-full h-full object-cover" src="../assets/videos/intro-video-2.mp4" playsinline autoplay loop muted></video>
                    </div>
                    <div class="w-full md:w-7/12 lg:w-8/12 md:my-12 md:pl-8 md:py-8 mx-4 px-2 py-2 mb-56 off-white-background z-10 rounded">
                        <p class="montserrat text-base xl:text-base green-text text-justify">
                            It all began with two swipes! We went on our first date, became facebook official, hillwalked,
                            had our first holiday in Barcelona, endured the COVID restrictions, bought our first house, went to Skye, 
                            travelled the NC500 in a campervan, went to Crete and skied.
                            <br>
                            <br>
                            We travelled to Lewis and Harris and explored some of the most beautiful beaches in the world. This is where David made plans to propose to Emily which after an 
                            aborted hillwalk ended up happening on Luskentyre Beach. This place now holds a special meaning for us both.
                        </p>
                    </div>
                </div>

This is the js file for the intersection observor.

const element = document.querySelectorAll('.element');

const observer = new IntersectionObserver(entries => {
    console.log('element');
});

observer.observe(element[0]);

Im simple trying to get the observer to recognise when elements are appearing.

You need to sign in to view this answers