JSFiddle - React, Tailwind, and code Playground

HTML

<!-- role=list necessary because WebKit removes list semantic when list-style-type: none -->
<ol class="toc-list" role="list">

    <li>
        <a href="#Introduction">
            <span class="title">Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction Introduction <span class="leaders" aria-hidden="true"></span></span> <span
                data-href="#Introduction" class="page"><span class="visually-hidden">Page&nbsp;</span>5</span>
        </a>
        <ol role="list">

            <li>
                <a href="#Introduction-About-This-Book">
                    <span class="title">About This Book<span class="leaders" aria-hidden="true"></span></span> <span
                        data-href="#Introduction-About-This-Book" class="page"><span
                            class="visually-hidden">Page&nbsp;</span>5</span>
                </a>
            </li>

            <li>
                <a href="#Introduction-Acknowledgments">
                    <span class="title">Acknowledgments<span class="leaders" aria-hidden="true"></span></span> <span
                        data-href="#Introduction-Acknowledgments" class="page"><span
                            class="visually-hidden">Page&nbsp;</span>8</span>
                </a>
            </li>

            <li>
                <a...

CSS

@import url("https://fonts.googleapis.com/css2?family=Literata");

* {
    font-family: "Literata";
}


.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

.toc-list, .toc-list ol {
  list-style-type: none;
}

.toc-list {
  padding: 0;
}

.toc-list ol {
  padding-inline-start: 2ch;
}

.toc-list > li > a {
  font-weight: bold;
  margin-block-start: 1em;
}

.toc-list li > a {
    text-decoration: none;
    display: grid;
    grid-template-columns: auto max-content;
    align-items: end;
}

.toc-list li > a > .title {
    position: relative;
    overflow: hidden;
}

.toc-list li > a .leaders::after {
    position: absolute;
    padding-inline-start: .25ch;
    content: " . . . . . . . . . . . . . . . . . . . "
        ". . . . . . . . . . . . . . . . . . . . . . . "
        ". . . . . . . . . . . . . . . . . . . . . . . "
        ". . . . . . . . . . . . . . . . . . . . . . . "
        ". . . . . . . . . . . . . . . . . . . . . . . "
        ". . . . . . . . . . . . . . . . . . . . . . . "
        ". . . . . . . . . . . . . . . . . . . . . . . ";
    text-align: right;
}

.toc-list li > a > .page {
    min-width: 2ch;
    font-variant-numeric: tabular-nums;
    text-align: right;
}