JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex">
  <!-- Side Menu -->
  <nav class="fixed top-16 left-0 w-1/4 bg-white shadow-md p-4">
    <ul class="space-y-4">
      <li><a href="#section1" class="text-gray-700 hover:text-blue-500">Section 1</a></li>
      <li><a href="#section2" class="text-gray-700 hover:text-blue-500">Section 2</a></li>
      <li><a href="#section3" class="text-gray-700 hover:text-blue-500">Section 3</a></li>
      <li><a href="#section4" class="text-gray-700 hover:text-blue-500">Section 4</a></li>
    </ul>
  </nav>

  <!-- Main Content -->
  <main class="ml-1/4 p-8">
    <section id="section1" class="py-8">
      <h2 class="text-2xl font-bold">Section 1</h2>
      <p>Your content for section 1...</p>
    </section>
    <section id="section2" class="py-8">
      <h2 class="text-2xl font-bold">Section 2</h2>
      <p>Your content for section 2...</p>
    </section>
    <section id="section3" class="py-8">
      <h2 class="text-2xl font-bold">Section 3</h2>
      <p>Your content for section 3...</p>
    </section>
    <section id="section4" class="py-8">
      <h2 class="text-2xl font-bold">Section 4</h2>
      <p>Your content for section 4...</p>
    </section>
  </main>
</div>

JavaScript

tailwind.config = {
      theme: {
        extend: {
          colors: {
            clifford: '#da373d',
          }
        }
      }
    }

const sections = document.querySelectorAll("section");
  const navLinks = document.querySelectorAll("nav a");

  window.addEventListener("scroll", () => {
    let current = "";

    sections.forEach(section => {
      const sectionTop = section.offsetTop;
      const sectionHeight = section.clientHeight;
      
      if (pageYOffset >= sectionTop - sectionHeight / 3) {
        current = section.getAttribute("id");
      }
    });

    navLinks.forEach(link => {
      link.classList.remove("text-blue-500");
      link.classList.add("text-gray-700");
      
      if (link.href.includes(current)) {
        link.classList.add("text-blue-500");
        link.classList.remove("text-gray-700");
      }
    });
  });