I'm trying to create a sticky header with TailwindCSS but can't seem to make it work.

I've read the

Also, you can find a deployed version of my app here.

I'd like to achieve something like this with my header component.

Any help is much appreciated.

CodePudding user response：

sticky element should be direct child of the scrollable element.

In your case scrollable element is the root __next container. Basically it means that you need to remove this div <div className="flex flex-col drop-shadow-2xl"> and replace it with React.Fragment so both of your headers, Countdown and second Header, would be direct children of this scrollable div.