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.jsandindex.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.tsxComponent, 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.