Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
2 replies
lko

How to create this layout

I want to recreate the layout shown in the picture, the height is 100vh and I want an element to be centered in it, and then, below it a scrollable element (only that element must be scrollable, not the entire page)

I tried this but didnt work:
<main className="min-h-screen h-0">
<div className="h-full grid place-items-center overflow-hidden">
      <div className="max-w-lg w-full flex flex-col items-center gap-8">
        <div className="relative flex flex-col items-center gap-8 w-full">
          <Clock />
          <input type="text" className="input w-full text-xl" autoFocus />
          <div className="absolute -bottom-10 left-1/2 -translate-x-1/2 translate-y-full w-full max-w-md overflow-y-auto">
            {/* all the text */}
          </div>
        </div>
      </div>
    </div>
</main>
image.png
Was this page helpful?