I have a page that structure that divided the page in two and in LG screen size the content of the page is not shown completely. It disappears on the top of the page
<div className="w-full h-full">
<div className="grid grid-cols-2 bg-white text-slate-700 lg:flex-row">
{/* Aside */}
<aside className="flex items-center col-span-2 px-4 py-8 overflow-y-auto lg:h-screen lg:col-span-1 text-slate-300 bg-slate-900">
<div className="w-2/3 mx-auto md:w-2/3">
<img className="h-8" src="/images/logo-white.svg" alt="" />
<h2 class="mt-10 font-serif font-semibold text-3xl leading-tight text-gray-100">
Grow on LinkedIn effortlessly <br class="hidden md:inline-flex lg:hidden xl:inline-flex" />
in just 10min/days.
</h2>
<p className="mt-8 text-xl font-normal leading-tight text-slate-300"> helps you grow professionally PERIOD!</p>
<ul class="mt-4 space-y-4 list-none text-slate-300">
<li class="flex items-center">
<i class="mr-2 text-xl text-green-500 fa-sharp fa-solid fa-circle-check"></i>
<span>Create <strong className="font-display">impactful content</strong> in your own style using
AI</span>
</li>
<li class="flex items-center">
<i class="mr-2 text-xl text-green-500 fa-sharp fa-solid fa-circle-check"></i>
<span><strong className="font-display">Monitor your growth</strong> with in-depth analytics</span>
</li>
<li class="flex items-center">
<i class="mr-2 text-xl text-green-500 fa-sharp fa-solid fa-circle-check"></i>
<span>Access to <strong className="font-display">10m+ viral</strong> articles, youtube videos &
LinkedIn posts</span>
</li>
</ul>
{/* Testimonial */}
<article className="max-w-4xl mx-auto mt-16 mb-10 text-gray-700">
<figure className="flex flex-col overflow-hidden bg-white rounded-lg md:flex-row lg:flex-col xl:flex-row">
{/* Testimonial Photo */}
<div className="w-full md:w-1/3 lg:w-full xl:w-1/3">
<img
src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt="Customer Name"
className="object-cover w-full h-48 md:h-full md:rounded-l-lg"
/>
</div>
{/* Testimonial content */}
<figcaption className="w-full p-4 md:w-2/3 lg:w-full xl:w-2/3">
<blockquote className="italic">
"Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry standard dummy text ever
since the 1509s"
</blockquote>
<p className="mt-4 text-lg font-semibold font-display">Sarah Cornor</p>
<p className="text-slate-500">Solopreneur IndieHacker</p>
</figcaption>
</figure>
</article>
{/* <div className="relative h-60 w-60 md:h-60 md:w-96">
<div
className="absolute bg-white h-60 w-60 md:h-60 md:w-96 rounded-3xl p-4 shadow-xl border border-neutral-200 shadow-black/[0.1] flex flex-col justify-between"
style={{
transformOrigin: "center top",
transform: "none",
top: 0,
zIndex: 3
}}
>
<div className="font-normal text-neutral-700 ">
<p>
I dont like this Twitter thing,{" "}
<span className="font-bold bg-emerald-100 text-emerald-700 px-1 py-0.5">
deleting it right away
</span>{" "}
because yolo. Instead, I would like to call it{" "}
<span className="font-bold bg-emerald-100 text-emerald-700 px-1 py-0.5">
X.com
</span>{" "}
so that it can easily be confused with adult sites.
</p>
</div>
<div>
<p className="font-medium text-neutral-500 ">Elon Musk</p>
<p className="font-normal text-neutral-400 ">
Senior Shitposter
</p>
</div>
</div>
<div
className="absolute bg-white h-60 w-60 md:h-60 md:w-96 rounded-3xl p-4 shadow-xl border border-neutral-200 shadow-black/[0.1] flex flex-col justify-between"
style={{
transformOrigin: "center top",
transform: "scale(0.94) translateZ(0px)",
top: "-10px",
zIndex: 2
}}
>
<div className="font-normal text-neutral-700 ">
<p>
The first rule of
<span className="font-bold bg-emerald-100 text-emerald-700 px-1 py-0.5">
Fight Club
</span>{" "}
is that you do not talk about fight club. The second rule of
<span className="font-bold bg-emerald-100 text-emerald-700 px-1 py-0.5">
Fight club
</span>{" "}
is that you DO NOT TALK about fight club.
</p>
</div>
<div>
<p className="font-medium text-neutral-500 ">
Tyler Durden
</p>
<p className="font-normal text-neutral-400 ">
Manager Project Mayhem
</p>
</div>
</div>
<div
className="absolute bg-white h-60 w-60 md:h-60 md:w-96 rounded-3xl p-4 shadow-xl border border-neutral-200 shadow-black/[0.1] flex flex-col justify-between"
style={{
transformOrigin: "center top",
transform: "scale(0.88) translateZ(0px)",
top: "-20px",
zIndex: 1
}}
>
<div className="font-normal text-neutral-700 ">
<p>
These cards are amazing,{" "}
<span className="font-bold bg-emerald-100 text-emerald-700 px-1 py-0.5">
I want to use them
</span>{" "}
in my project. Framer motion is a godsend ngl tbh fam ????
</p>
</div>
<div>
<p className="font-medium text-neutral-500 ">Manu Arora</p>
<p className="font-normal text-neutral-400 ">
Senior Software Engineer
</p>
</div>
</div>
</div> */}
</div>
</aside>
{/* Main Content */}
<main className="flex flex-col items-center justify-center col-span-2 p-8 overflow-y-auto text-center lg:h-screen lg:col-span-1 lg:min-h-screen text-slate-700">
<h1 class="font-serif text-4xl font-bold">Try <br class="md:hidden inline-flex" />for Free</h1>
<p class="mt-2 text-slate-500">
???? No credit card required • ???? 7-days trial
</p>
<button class="px-10 py-3 mt-16 text-lg text-white bg-[#2967BC] rounded-lg hover:bg-[#004182]">
<span class="flex items-center font-display">
<i class="text-2xl fa-brands fa-linkedin"></i>
<span class="ml-2">Sign in with LinkedIn</span>
</span>
</button>
<p className="mt-2 text-sm text-center text-slate-500">
By creating your account with SprintSocial <br />
you agree to the{' '}
<a href="https://xxxx.notion.site/Terms-of-Service-02fcf379ac8b406bbc74921577c29034?pvs=25" className="font-semibold text-slate-500 hover:underline">
Terms
</a>
{' '} &{' '}
<a href="https://xxxxx.notion.site/Privacy-Policy-e919bd2df11b4ed4a99a3c1d217ac331?pvs=25" className="font-semibold text-slate-500 hover:underline">
Privacy Policy
</a>
</p>
<p className="mt-10 text-sm text-center">
Have a Question?{' '}
<i className="fa-regular fa-message" />
<a href="#" className="underline text-slate-700">
Chat with Founder
</a>
</p>
</main>
</div>
</div>
I want the whole content to be displayed and the each section should scroll inside its self.
Website