Skip to content
Forge

Page table of contents

A table of contents that follows the reader through a long article and highlights the current section.

  • Tailwind
  • React
  • CSS
  • WordPress
Open in a new tab

Description

On large screens the table of contents sticks in its column; on mobile it sits at the top of the article. The visible section is marked with aria-current and an accent line, computed once per frame while scrolling. Without JavaScript the anchor links work as usual.

Code

Loading the code…

Archive contents

sommaire-page-html-tailwind.zip3 files · 5 Ko

  • index.html9 Ko
  • README.md2 Ko
  • LICENSE.md1 Ko

Tags

Updated on October 13, 2026.

In the same spirit

  • Pagination

    Free

    Complete pagination with the current page, ellipses and previous/next arrows that are properly disabled.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Dropdown menu

    Free

    A navigation bar with dropdown submenus that close with the Escape key, an outside click or when focus leaves the menu.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Breadcrumb

    Free

    An accessible breadcrumb that places the page within the site and tightens on mobile to fit on one line.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Video testimonial with transcript

    Free

    A CSS-drawn video poster with a play button, the testimonial's key quote, its author, and the timestamped transcript in a collapsible panel.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component