Content with Sidebar Skeleton for React

A grid w-full max-w-5xl grid-cols-3 gap-8. The article is col-span-2 with gap-6. The sidebar is the remaining column, two cards stacked with gap-6.

An h-8 w-3/4 title, an h-64 w-full image, then two paragraph groups with gap-3. The first ends on w-5/6. The second ends on w-4/6. Every line is h-4.

Each card is flex flex-col gap-3 rounded-md border p-4. The first has an h-5 w-24 title and two h-4 lines. The second has an h-5 w-32 title and four link rows.

LINKS maps four rows of flex items-center gap-2. Each row is a size-8 rounded-md block and an h-4 flex-1 bar.

Match h-64 to the hero, col-span-2 to the real article column, and the four link rows to the list you render. The grid is grid-cols-3 at every width in this file.

Set aria-hidden on the bars when nearby text already says the page is loading. Skeleton is a placeholder, and a text status should carry the message.