JSFiddle - React, Tailwind, and code Playground

by sheshu036

HTML

<body ng-app="app_example" data-spy="scroll" data-target="#myScrollspy">
     <div class="row">
        <div class="col-xs-3" id="myScrollspy">
            <ul class="nav nav-tabs nav-stacked affix-top" data-spy="affix" data-offset-top="125">
                <li class="active"><a href="#section1">Section One</a></li>
                <li><a href="#section2">Section Two</a></li>
                <li><a href="#section3">Section Three</a></li>
                <li><a href="#section4">Section Four</a></li>
                <li><a href="#section5">Section Five</a></li>
                <li>
          <a href="#section6">Section 6</a>
        </li>
        <li>
          <a href="#section7">Section 7</a>
        </li>
        <li>
          <a href="#section8">Section 8</a>
        </li>
            </ul>
        </div>
     
   <div class="col-xs-9">
    <section id="section1" class="section1">
      <h1 class="page-header">Section 1</h1>




      Quisque sit amet convallis arcu. Cras eget ligula consequat, feugiat nulla vel, gravida nisi. In nibh metus, pharetra nec turpis id, tempor consequat tellus. Proin tempor aliquam laoreet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut a rutrum erat. Nunc hendrerit, libero eu posuere tempor, ipsum libero vulputate mi, vel volutpat urna nunc sed lacus. In dictum vehicula risus laoreet vehicula. Donec rhoncus tristique leo, sed finibus erat tempor non. Aenean libero ligula, iaculis vitae arcu tempor, sagittis gravida elit. Duis ut lacinia lectus, sed mattis diam.

      Ut eget cursus odio, in aliquam ligula. Pellentesque facilisis hendrerit tristique. Pellentesque arcu erat, convallis at nunc sed, semper auctor erat. Praesent facilisis pulvinar tortor, eget euismod leo facilisis nec. Pellentesque placerat lorem leo, vitae iaculis nulla sodales non. Donec congue ex augue, eget efficitur felis accumsan quis. Nunc ornare risus nec risus laoreet fermentum. Suspendisse at mollis ligula. Vivamus feugiat sapien eu...

CSS

ul.nav-tabs {
	width: 140px;
	margin-top: 20px;
	border-radius: 4px;
	border: 1px solid #ddd;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
}
ul.nav-tabs li {
	margin: 0;
	border-top: 1px solid #ddd;
}
ul.nav-tabs li:first-child {
	border-top: none;
}
ul.nav-tabs li a {
	margin: 0;
	padding: 8px 16px;
	border-radius: 0;
}
ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover {
	color: #fff;
	background: #0088cc;
	border: 1px solid #0088cc;
}
ul.nav-tabs li:first-child a {
	border-radius: 4px 4px 0 0;
}
ul.nav-tabs li:last-child a {
	border-radius: 0 0 4px 4px;
}
ul.nav-tabs.affix {
	top: 30px; /* Set the top position of pinned element */
}

JavaScript

$("ul li").click(function() {
        $(this).siblings().removeClass('active');
        $(this).addClass('active');
   });