JSFiddle - React, Tailwind, and code Playground

by phreaddee

HTML

<nav>
  <ul>
    <li><a href="#one">Title#1</a></li>
    <li><a href="#two">Title #2</a></li>
    <li><a href="#three">Title #3</a></li>
    <li><a href="#four">Title #4</a></li>
  </ul>
</nav>

<!-- place the id's in the appropriate headings -->
<article>
<!-- Section 1 -->
  <h2 id="one">Title#1  </h2>
  <p>Lorem ipsum dolor sit amet, consectetur ading elit.</p> 

  <h3 id="one-a">SubTitle-1a</h3>
  <p>Lorem ipsum dolor sit amet, consectetur ading elit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur ading elit.</p> 

<!-- Section 2 -->
  <h2 id="two">Title#2  </h2>
  <p>Lorem ipsum dolor sit amet, consectetur ading elit.</p> 

  <h3 id="two-a">SubTitle-2a</h3>
  <p>Lorem ipsum dolor sit amet, consectetur ading elit.</p> 
  <p>Lorem ipsum dolor sit amet, consectetur ading elit.</p>

  <h4 id="two-b">SubTitle-2b</h4>
  <p>Lorem ipsum dolor sit amet, consectetur ading elit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur ading elit.</p> 
  <p>Lorem ipsum dolor sit amet, consectetur ading elit.</p>
    
<!-- Section 3 -->
  <h2 id="three">Title#3  </h2>
  <p>Lorem ipsum dolor sit amet, consectetur ading elit.</p> 

  <h3 id="three-a">SubTitle-3a</h3>
  <p>Lorem ipsum dolor sit amet, consectetur ading elit.</p> 
  <p>Lorem ipsum dolor sit amet, consectetur ading elit.</p>

  <h4 id="three-b">SubTitle-3b</h4>
  <p>Lorem ipsum dolor sit amet, consectetur ading elit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur ading elit.</p> 
  <p>Lorem ipsum dolor sit amet, consectetur ading elit.</p>
    
  <h4 id="three-c">SubTitle-3c</h4>
  <p>Lorem ipsum dolor sit amet, consectetur ading elit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur ading elit.</p> 
  <p>Lorem ipsum dolor sit amet, consectetur ading elit.</p>
    
<!-- Section 4 -->
  <h2 id="four">Title#4  </h2>
  <p>Lorem ipsum dolor sit amet, consectetur ading elit.</p> 

  <h3 id="four-a">SubTitle-4a</h3>
  <p>Lorem ipsum dolor sit amet, consectetur ading elit.</p> 
  <p>Lorem ipsum dolor sit amet,...

CSS

body {margin:0;padding:0;}
nav {position:fixed;float:left;width:100%;font-size:0.85em;background-color:red;padding:0;margin:0;height:100px;}
article {float:right;margin-left:35%;width:65%;}
#one, #two, #three, #four {padding-top:110px;margin-top:0;}
#two, #three, #four {margin-top:-110px;}