Table of Content with tailwindcss + scrollspyJS
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<title>Toc Test</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<style>
.content_box{
min-height:280px;
}
</style>
<div class="flex justify-content-between p-2 " id="js-scrollspy">
<div id="main" class="flex-1 me-4 p-4 bg-primary bg-opacity-10">
<div id="toc1" class="mb-4">
<h2 class="bg-sky-200 p-2">What is HTML</h2>
<div class="content_box bg-pink-50">balabla bala bala</div>
</div>
<div id="toc2" class="mb-4">
<h2 class="bg-sky-200 p-2">What is CSS</h2>
<div class="content_box bg-pink-50">balabla bala bala</div>
</div>
<div id="toc3" class="mb-4">
<h2 class="bg-sky-200 p-2">What is Javascript</h2>
<div class="content_box bg-pink-50">balabla bala bala</div>
</div>
<div id="toc4" class="mb-4">
<h2 class="bg-sky-200 p-2">What is JS Lib</h2>
<div id="toc4_a">
<h2 class="bg-sky-200 p-2">What is jQuery</h2>
<div class="content_box bg-pink-50">balabla bala bala</div>
</div>
<div id="toc4_b" class="mb-4">
<h2 class="bg-sky-200 p-2">What is React</h2>
<div class="content_box bg-pink-50">balabla bala bala</div>
</div>
</div>
<div id="toc5" class="mb-4">
<h2 class="bg-sky-200 p-2">What is PHP</h2>
<div class="content_box bg-pink-50">balabla bala bala</div>
</div>
<div class="bg-secondary p-4" style="min-height: 800px;">other_content</div>
</div>
<div id="toc_menu">
<div class="bg-rose-100 p-2 sticky top-0">
<strong>Table of Content</strong>
<ul class="js-scrollspy-nav">
<li class="mb-4"><a class="p-2" href="#toc1">What is HTML</a></li>
<li class="mb-4"><a class="p-2" href="#toc2">What is CSS</a></li>
<li class="mb-4"><a class="p-2" href="#toc3">What is Javascript</a></li>
<li class="mb-4">
<a class="p-2 " href="#toc4">What is JS libs</a>
<ul class="pl-6 mt-4 js-sub-scrollspy-nav">
<li class="mb-4"><a class="p-2" href="#toc4_a">What is jQuery</a></li>
<li class="mb-4"><a class="p-2" href="#toc4_b">What is React</a></li>
</ul>
</li>
<li class="mb-2"><a class="p-2" href="#toc5">What is PHP</a></li>
</ul>
</div>
</div>
</div>
<script src="https://cdn.rawgit.com/makotot/scrollspy/master/build/scrollspy.js"></script>
<script>
var spy = new ScrollSpy('#js-scrollspy', {
nav: '.js-scrollspy-nav > li > a',
className: 'bg-white',
callback: function () {
}
});
var subSpy = new ScrollSpy('#js-scrollspy', {
nav: '.js-sub-scrollspy-nav > li > a',
className: 'bg-white'
});
</script>
</body>
</html>