Instructions

This page also contains some Code for me to speed up the Video

• Install Tailwind CSS with Create React App (I already did it) Link
• Take a look at package.json, postcss.config.js, tailwind.config.js and index.css
• Copy/Past this code in your App.tsx:

<div>
      <div className="max-w-3xl mx-auto rounded-b-[3rem] bg-[#081b4b] p-6 flex justify-center items-center mb-6 text-white drop-shadow-md">
        <h1>Your Heading</h1>
      </div>
      <div className="text-[#031b4eb3] bg-neutral-50 max-w-3xl mx-auto rounded-[3rem] p-6 drop-shadow-lg">
        <div className="content">
          <h2>1- Lorem ipsum dolor sit amet.</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Id nihil
            magni necessitatibus nesciunt, obcaecati aspernatur, esse amet
            voluptates, libero modi sunt. Facilis a animi quibusdam, consequatur
            repudiandae eius asperiores inventore.
          </p>
          <h3>2- Lorem ipsum dolor sit.</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
            dolorem facere iure officia! Quae, libero nam ipsam doloremque
            maxime nisi dicta, earum dolorum alias culpa minus at optio mollitia
            repellendus.
          </p>
          <h4>3- Lorem ipsum dolor sit.</h4>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam,
            cum.
          </p>
          <h2>4- Lorem ipsum dolor sit amet consectetur.</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
            possimus ullam consequatur totam, ad cum illum iure sunt natus
            sapiente expedita, non dicta laudantium iste commodi nesciunt odit
            quibusdam enim!
          </p>
          <h3>5- Lorem, ipsum dolor.</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Perspiciatis fugit expedita suscipit!
          </p>
          <h4>6- Lorem, ipsum.</h4>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>Lorem ipsum dolor sit amet consectetur.</p>
          <h5>7- Lorem ipsum dolor sit amet consectetur.</h5>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <h6>8- Lorem, ipsum.</h6>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem
            deserunt soluta magnam ullam fuga odit sequi nemo voluptate unde
            voluptas.
          </p>
          <h2>9- Lorem, ipsum dolor.</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing.</p>
          <h3>10- Lorem, ipsum.</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, ut?
          </p>
          <h2>11- Lorem ipsum dolor sit amet.</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Id nihil
            magni necessitatibus nesciunt, obcaecati aspernatur, esse amet
            voluptates, libero modi sunt. Facilis a animi quibusdam, consequatur
            repudiandae eius asperiores inventore.
          </p>
          <h3>12- Lorem ipsum dolor sit.</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
            dolorem facere iure officia! Quae, libero nam ipsam doloremque
            maxime nisi dicta, earum dolorum alias culpa minus at optio mollitia
            repellendus.
          </p>
          <h4>13- Lorem ipsum dolor sit.</h4>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam,
            cum.
          </p>
          <h2>14- Lorem ipsum dolor sit amet consectetur.</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
            possimus ullam consequatur totam, ad cum illum iure sunt natus
            sapiente expedita, non dicta laudantium iste commodi nesciunt odit
            quibusdam enim!
          </p>
          <h3>15- Lorem, ipsum dolor.</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Perspiciatis fugit expedita suscipit!
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Perspiciatis fugit expedita suscipit!
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Perspiciatis fugit expedita suscipit!
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Perspiciatis fugit expedita suscipit!
          </p>
          <h4>16- Lorem, ipsum.</h4>
          <p>Lorem ipsum dolor sit amet consectetur.</p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>

          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <h5>17- Lorem ipsum dolor sit amet consectetur.</h5>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <h6>18- Lorem, ipsum.</h6>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem
            deserunt soluta magnam ullam fuga odit sequi nemo voluptate unde
            voluptas.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <h2>19- Lorem, ipsum dolor.</h2>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing.</p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing.</p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing.</p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, ut?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <h3>20- Lorem, ipsum.</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, ut?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, ut?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab sequi
            eum saepe quo impedit. Recusandae corporis facere at? Qui, eligendi?
          </p>
        </div>
      </div>
      <div className="max-w-3xl mx-auto rounded-t-[3rem] bg-[#081b4b] p-6 flex justify-center items-center mt-6 text-white drop-shadow-md">
        <h1>Your Footer</h1>
      </div>
    </div>

• Add these styles to style.css:

h2,
h3,
h4,
h5,
h6 {
  @apply font-semibold text-[#031b4e] mb-1 mt-4;
}

h1 {
  @apply text-[1.8rem];
}

h2 {
  @apply text-[1.6rem];
}

h3 {
  @apply text-[1.42rem];
}

h4 {
  @apply text-[1.26rem];
}

h5 {
  @apply text-[1.12rem];
}

h6 {
  @apply text-base;
}

::-webkit-scrollbar-thumb {
  @apply bg-black/70 rounded-lg;
}

::-webkit-scrollbar {
  @apply w-1;
}

• Create TOC.tsx Component, it only has one prop: "selector"
• Select all headings in the container and generate a unique number as data-id for each on of them.
• Render your heading list.
• We need auto scroll for our heading list. Parent element should scroll up and down to find the current heading.