JSFiddle - React, Tailwind, and code Playground

HTML

<section class="wrap">

<div class="tablist">
    <ul class="tabs">
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#stuff">Stuff</a></li>
    </ul>
  </div>      
    <div id="about" class="tab-content">
<div>
      <h2>About</h2>
    <a href="#test" goto="stuff">Go to stuff</a>
      <p>Sed do eiusmod tempor incididunt consectetur adipisicing elit,   duis aute irure dolor. In reprehenderit in voluptate quis nostrud   exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia   deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate   cupidatat non proident, sed do eiusmod tempor incididunt.</p>
      <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur   adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam.   Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum   dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat   nulla pariatur.</p>
    </div>

        </div>

    <div id="services" class="tab-content">

     <div>
      <a name="test"></a><h2>Services</h2>
      <p>Sed do eiusmod tempor incididunt consectetur adipisicing elit,   duis aute irure dolor. In reprehenderit in voluptate quis nostrud   exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia   deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate   cupidatat non proident, sed do eiusmod tempor incididunt.</p>
      <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur   adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam.   Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum   dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat   nulla pariatur.</p>
    </div>

        </div>
        
   <div id="stuff" class="tab-content">

     <div>
     <h2>Stuff</h2>
      <p>Sed do eiusmod tempor incididunt consectetur adipisicing elit,  ...

CSS

*    {margin:0; padding: 0;}
body {font-family: Arial, Helvetica, sans-serif; font-size: 85%; line-height: 1.48;}
p, a    {font: 100%/1.48 Helvetica Neue, Helvetica, Arial, sans-serif; margin-bottom: 21px;}

.tablist            {height: 28px; clear:both; border-bottom: solid 1px #ccc;}
.tabs               {margin-left: 5px;}
.tabs ul            {margin: 0px; padding: 0px;}
.tabs li            {margin: 0px; padding: 0px; display: inline; list-style-type: none;}
.tabs li  a         {position: relative; float: left; margin: 0 1px -1px 0; cursor: pointer; background: #009edd; color:#ffffff; padding: 4px 20px; text-decoration: none;}
.tab-content        {border-width: 0 1px 1px; background: #FFF; padding: 15px; border: solid 1px #ccc; border-top: none;}
section.wrap        {width: 590px; margin: 100px auto 0;}
.tabs  a            {color:#ffffff; text-decoration: none;}
.tabs li.active  a  {background-color: #FFF; border: solid 1px #ccc; border-width: 1px 1px 0 1px; color: #000!important; font-weight: bold;}

JavaScript

$(document).ready(function() {
    var $tabContent = $(".tab-content"),
        $tabs = $("ul.tabs li"),
        tabId;

    $tabContent.hide();
    $("ul.tabs li:first").addClass("active").show();
    $tabContent.first().show();

    $tabs.click(function() {
        var $this = $(this);
        $tabs.removeClass("active");
        $this.addClass("active");
        $tabContent.hide();
        var activeTab = $this.find("a").attr("href");
        $(activeTab).fadeIn();
        //return false;
    });

    // Grab the ID of the .tab-content that the hash is referring to
    tabId = $(window.location.hash).closest('.tab-content').attr('id');

    // Find the anchor element to "click", and click it
    $tabs.find('a[href=#' + tabId + ']').click();
});

$('a').not('.tabs li a').on('click', function(evt) {
    evt.preventDefault();
    var whereTo = $(this).attr('goto');
    $tabs = $("ul.tabs li");
    $tabs.find('a[href=#' + whereTo + ']').trigger('click');
    //alert(attr('name'));
//alert( $('#'+whereTo+' a').offset().top );
    $('html, body').animate({
        scrollTop: $('#'+whereTo+' a').offset().top
    });

});

$(function() {
    $('a.refresh').live("click", function() {
        location.reload();
    });
});