JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<div class="header">Fixed Header</div>
<div class="page-wrapper">
<div class="page-content">
<div style="height:300px;width:100%;margin:0 auto 20px auto;background-color:#888;">Content Above Accordio (300px)</div>
<div id="accordion">
    <h3 id="ac1">Section 1</h3>
    <div>
        <div style="height:600px;width:90%;margin:0 auto;background-color:#888;">Tab #1 Content (600px)</div>
    </div>
    <h3 id="ac2">Section 2</h3>
    <div>
        <div style="height:900px;width:90%;margin:0 auto;background-color:#888;">Tab #2 Content (900px)</div>
    </div>
    <h3 id="ac3">Section 3</h3>
    <div>
        <div style="height:600px;width:90%;margin:0 auto;background-color:#888;">Tab #3 Content (600px)</div>
    </div>
    <h3 id="ac4">Section 4</h3>
    <div>
        <div style="height:900px;width:90%;margin:0 auto;background-color:#888;">Tab #4 Content (900px)</div>
    </div>
    <h3 id="ac5">Section 5</h3>
    <div>
        <div style="height:600px;width:90%;margin:0 auto;background-color:#888;">Tab #5 Content (600px)</div>
    </div>
</div>

<div style="height:500px;width:100%;margin:20px auto;background-color:#888;">Content Below Accordio (500px)</div>

</div>
</div>

CSS

body {
        margin: 0;
        padding: 0;
}
      .header {
        position: fixed;
        height: 80px;
        width: 100%;
        background-color: #333;
        z-index: 9999;
      }

      .page-wrapper {
          width: 80%;
          margin: 0 auto;
      }

      .page-content {
          padding-top: 90px;
      }

JavaScript

$(function() {
        $("#accordion").accordion({
            autoHeight: false,
            collapsible: true,
            heightStyle: "content",
            active: 0,
            animate: 300
        });
        $('#accordion h3').bind('click',function(){
            theOffset = $(this).offset();
                 $('body,html').animate({ scrollTop: theOffset.top - 100 });
        });
 });