JSFiddle - React, Tailwind, and code Playground

by R

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div class="row">
    <h1>Content</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro nobis recusandae ad minus quo rerum enim esse omnis necessitatibus sint vitae doloremque atque sunt nemo saepe quas facilis architecto pariatur!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati et voluptatum iste quod veritatis explicabo maiores quo laboriosam sit minus suscipit tempora amet vel rem nostrum nobis provident tempore quidem.</p>
</div>

<div class="example-tabs">
    <ul class="nav nav-pills nav-justified">
        <li><a href="#tab-1" data-toggle="tab" class="scroll">Tab 1</a>

        </li>
        <li class="active"><a href="#tab-2" data-toggle="tab" class="scroll">Tab 2</a>

        </li>
        <li><a href="#tab-3" data-toggle="tab" class="scroll">Tab 3</a>

        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" id="tab-1">
            <div class="row">
                 <h1>Tab 1</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident beatae deserunt animi architecto iure possimus excepturi esse cumque dolore sunt vel explicabo sint non tempore perferendis incidunt cupiditate voluptates quis.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic tenetur natus mollitia rem explicabo ex cupiditate quia sapiente distinctio deleniti velit in nemo tempore molestiae accusamus vero illo delectus itaque.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt hic veritatis at assumenda dolorum magnam vel velit necessitatibus doloribus omnis earum explicabo eos ducimus quis vitae libero quod facere officiis.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident beatae deserunt...

JavaScript

jQuery(document).ready(function ($) {

  $('.nav a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})  
    
    $('a.scroll').on('click', function (e) {
        var href = $(this).attr('href');
        $('html, body').animate({
            scrollTop: $(href).offset().top
        }, 'slow');
        e.preventDefault();
    });
    
    
    
    
});