JSFiddle - React, Tailwind, and code Playground
HTML
<div class="nav">
<a href="#block-1" class="nav__link">Item 1</a>
<a href="#block-2" class="nav__link">Item 2</a>
<a href="#block-3" class="nav__link">Item 3</a>
<a href="#block-4" class="nav__link">Item 4</a>
<a href="#block-5" class="nav__link">Item 5</a>
</div>
<div class="content">
<div id="block-1" class="block block-1">
<h3>Block 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate delectus rem accusamus neque nesciunt deserunt dolores nulla ipsam, quam tenetur vel a nemo aliquid, unde facere illum dignissimos assumenda iure nam magni. Officiis reiciendis labore necessitatibus in ipsam nam, id maiores. Architecto placeat perspiciatis natus repudiandae, eveniet quaerat culpa incidunt provident quisquam suscipit esse assumenda reprehenderit in excepturi inventore iste eum qui dolorem quo voluptatum adipisci, modi tenetur, libero nobis. Fugit odio itaque nesciunt quo quaerat numquam praesentium corporis laudantium repudiandae rem cumque culpa harum iste cupiditate, saepe vitae omnis illum. Expedita ab minus consectetur nemo distinctio, pariatur veritatis at!</p>
</div>
<div id="block-2" class="block block-2">
<h3>Block 2</h3>
<p>Optio repellendus nihil dolor dignissimos rem vel praesentium saepe veniam minima accusantium, voluptatem, iste ipsum perferendis minus. Dicta animi earum esse laborum expedita! Adipisci praesentium blanditiis excepturi impedit quaerat quia atque sed cupiditate laboriosam voluptate debitis maxime animi, quisquam ut, expedita iste consequatur, ipsa, quidem illo aliquid doloremque id! A laudantium ipsa temporibus ab velit debitis officiis iusto saepe eius deleniti itaque labore corporis aliquid nemo soluta adipisci, at quibusdam ea. Eaque saepe enim nemo id! Recusandae sunt facilis aut error impedit voluptate! Dolorem nemo recusandae quaerat delectus rem minima, vero facere exercitationem voluptatum voluptatem expedita dolorum et quos deserunt.</p>
</div>
<div id="block-3"...
CSS
.block {
margin-top: 20px;
}