我有一个页面,它的结构将页面一分为二,并且在LG屏幕大小中,页面的内容没有完全显示出来。它在页面顶部消失
<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>
我希望显示整个内容,并且每个部分都应该在其自身内部滚动。
Website
