JSFiddle - React, Tailwind, and code Playground

by drawcard

HTML

<header>
    <h1>title</h1>
</header>
<article>
    <h1>H1 Header</h1>
    <div class="post">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare vulputate magna, a dapibus felis tincidunt a. Aliquam quam ipsum, rhoncus sit amet tristique ut, eleifend blandit est. </p>

	<h2 id="one">Subheader 1</h2>
    <p>Vestibulum quis magna neque. Phasellus molestie accumsan interdum. Proin lacus risus, mattis sed dictum pretium, sollicitudin non mauris.</p>

	<p>Nullam non elit odio. Donec malesuada lorem a sapien consectetur consectetur.</p>

	<h2 id="two">Subheader 2</h2>
	<p>Donec placerat blandit sapien, vitae mattis diam vestibulum sit amet. Donec non nibh purus. Vivamus luctus ipsum at lacus malesuada at molestie urna gravida. </p>

	<p>Nulla eget velit justo, a dignissim nunc. Nam pulvinar, sapien iaculis imperdiet dapibus, nisl velit pulvinar purus, ut commodo sapien nunc sed nunc.</p>

	<h2 id="three">Subheader 3</h2>
	<p>Donec placerat blandit sapien, vitae mattis diam vestibulum sit amet. Donec non nibh purus. Vivamus luctus ipsum at lacus malesuada at molestie urna gravida. </p>

	<h2 id="four">Subheader 4</h2>
	<p>Donec placerat blandit sapien, vitae mattis diam vestibulum sit amet. Donec non nibh purus. Vivamus luctus ipsum at lacus malesuada at molestie urna gravida. </p>

    </div>
</article>

CSS

h2 {
    padding-top: 70px;
    margin-top: -70px;
}

body{padding:0; margin:0;}

header{
    z-index:2;
    position:fixed;
    padding-left:20px;
    height:60px;
    line-height:60px;
    width:100%;
    background:black;
}

header h1{
    margin:0; padding:0;
    color:white;
}

article{
    z-index:1;
    padding:60px 20px 20px 20px;
}

.table-of-contents{
    width:50%;
    float:right;
    margin:0 0 1.5em 1.5em;
}

.table-of-contents h3{
    margin:0;
}

JavaScript

var ToC =
  "<nav role='navigation' class='table-of-contents'>" +
    "<h3>Table of Contents:</h3>" ;

var newLine, el, title, link;

$("article h2").each(function() {

  el = $(this);
  title = el.text();
  link = "#" + el.attr("id");

  newLine =
      "<p><a href='" + link + "'>" +
        title +
      "</a></p>" ;

  ToC += newLine;

});

ToC +=
  "</nav>";

$(".post").prepend(ToC);