Прилипающая шапка

И последнее: шапка с навигацией должна оставаться вверху окна, пока посетитель прокручивает страницу, чтобы ссылки всегда были под рукой.

Как вы знаете из курса CSS, элемент с position: sticky остаётся в обычном потоке, пока прокрутка не унесла бы его за край, заданный его смещением. Тогда он прилипает к этому краю, но только пока его родитель виден на экране. Родитель нашего элемента header — это body, высотой со всю страницу, так что шапка никогда не уедет. В Tailwind достаточно классов sticky top-0. (С fixed шапка тоже осталась бы в окне, но вышла бы из обычного потока, и hero-блок заехал бы под неё.)

Какой из перекрывающихся элементов окажется сверху, решает z-index, для него есть классы z-0, z-10, z-20, z-30, z-40 и z-50 (z-10 — это z-index: 10). Шаги по десять оставляют место для элементов, которым нужно встать между ними.