Layout Recipe

Reverse Stacking Order with Tailwind flex-col-reverse

'flex-col-reverse' stacks children bottom-to-top: the first element in your DOM renders at the bottom of the container. Chat threads and activity feeds use this so the newest message stays visually anchored at the bottom while you append to the end of the list — and as a bonus, the browser keeps the scroll position pinned there. Note that only the visual order flips; screen readers and tab order still follow the DOM.

The playground below is pre-configured with this exact layout — tweak any control to explore, then copy the Tailwind or vanilla CSS from the exporter.