2 replies

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>

<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>

KP-C

Kevin Powell - Community•3y ago•

2 replies

lko

How to create this layout

<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>

<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>

How to create this layout

Similar Threads

How to create this layout

Similar Threads

Similar Threads

Similar Threads