JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height:50px;">
<a href="#1" class="infoTags" style=" padding: 5px; border-radius:5px;"> orange</a>
<a href="#2" class="infoTags" style=" padding: 5px; border-radius:5px;"> green</a>
<a href="#3" class="infoTags" style=" padding: 5px; border-radius:5px;"> blu</a>
<a href="#4" class="infoTags" style=" padding: 5px; border-radius:5px;"> red</a>
</div>

<div id="iddescription" style="border-style:solid; border-radius:5px; border-width:2px; border-color:rgba(0, 255, 0, 0.6); overflow:auto; word-wrap:break-word;height:130px;">

<p><span id="1" style="background:orange;">hi i am a title</span><br>hi im am a paragraph and i am going to go on and on and on.  hi im am a paragraph and i am going to go on and on and on. hi im am a paragraph and i am going to go on and on and on. hi im am a paragraph and i am going to go on and on and on. hi im am a paragraph and i am going to go on and on and on. <br><br><span id="2" style="background:#00ff00;">hi i am a different title</span><br> hi im am a paragraph and i am going to go on and on and on.  hi im am a paragraph and i am going to go on and on and on. hi im am a paragraph and i am going to go on and on and on. hi im am a paragraph and i am going to go on and on and on. hi im am a paragraph and i am going to go on and on and on.<br><br><span id="3" style="background:blue;">hi i the third title</span><br> hi im am a paragraph and i am going to go on and on and on.  hi im am a paragraph and i am going to go on and on and on. hi im am a paragraph and i am going to go on and on and on. hi im am a paragraph and i am going to go on and on and on. hi im am a paragraph and i am going to go on and on and on.<br><br><span id="4" style="background:red;">the final title is me</span><br> hi im am a paragraph and i am going to go on and on and on.  hi im am a paragraph and i am going to go on and on and on. hi im am a paragraph and i am going to go on and on and on. hi im am a paragraph and i am going to go on and on and on. hi...

JavaScript

$('.infoTags')
  // Remove links that don't actually link to anything
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(function(event) {
    // On-page links
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
      &&
      location.hostname == this.hostname
    ) {
      // Figure out element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // Does a scroll target exist?
      if (target.length) {
        // Only prevent default if animation is actually gonna happen
        event.preventDefault();
   
        $('#iddescription').animate({
 scrollTop: target.position().top - $('#iddescription').position().top
        }, 1000, function() {

        });
      }
    }
  });