Can you give it a newspaper feel like this https://codepen.io/silkine/pen/QWBxVX
I've transformed your fluid typography guide into a classic newspaper design inspired by the CodePen example. The design now features a traditional newspaper masthead ("The Typography Times"), serif fonts (Playfair Display for headlines, Merriweather for body text), multi-column layouts with justified text, drop caps, double-ruled borders, and a cream/off-white background. The interactive slider remains functional but is now styled to match the vintage newspaper aesthetic with black borders and traditional typography.
Look amazing, I love it but fix the mide page toggle, the contrast broke, it is too dark if not the text selected, plus fix the padding
I've fixed both issues: the inactive tab text now uses text-white/70 with a hover state of text-white/90 for much better contrast against the black background, and I've increased all padding from p-6 to p-8 throughout the newspaper sections to give the content more breathing room.
Change p-[3px] to p-[5px]
<div role="tablist" aria-orientation="horizontal" data-slot="tabs-list" class="text-muted-foreground items-center justify-center rounded-lg p-[5px] grid w-full grid-cols-3 bg-black h-12" tabindex="0" data-orientation="horizontal" style="outline: none;"><button type="button" role="tab" aria-selected="true" aria-controls="radix-_r_0_-content-preview" data-state="active" id="radix-_r_0_-trigger-preview" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm whitespace-nowrap