TOC with tailwindcss + scrollspyJS

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>