Integrating Timeline Codepen

Hi, I'm trying to add this codepen but simply pasting the HTML code into a code block isn't doing anything. Are there additional steps to be added?

https://codepen.io/exinfinite/pen/LYOZBvR

Add this code into Code BLock

<nav>
	<!--Shows our position on the timeline-->
	<div class="marker"></div>

	<!--Draggable element-->
	<div class="nav__track" data-draggable>
		<ul class="nav__list">
			<li>
				<a href="#section_1" class="nav__link" data-link><span>1993</span></a>
			</li>
			<li>
				<a href="#section_2" class="nav__link" data-link><span>1995</span></a>
			</li>
			<li>
				<a href="#section_3" class="nav__link" data-link><span>1997</span></a>
			</li>
			<li>
				<a href="#section_4" class="nav__link" data-link><span>2000</span></a>
			</li>
			<li>
				<a href="#section_5" class="nav__link" data-link><span>2001</span></a>
			</li>
			<li>
				<a href="#section_6" class="nav__link" data-link><span>2003</span></a>
			</li>
			<li>
				<a href="#section_7" class="nav__link" data-link><span>2007</span></a>
			</li>
			<li>
				<a href="#section_8" class="nav__link" data-link><span>2011</span></a>
			</li>
			<li>
				<a href="#section_9" class="nav__link" data-link><span>2016</span></a>
			</li>
		</ul>
	</div>
</nav>

<main>
	<section id="section_1" style="--i: 0">
		<h2 class="section__heading">1993</h2>
	</section>
	<section id="section_2" style="--i: 1">
		<h2 class="section__heading">1995</h2>
	</section>
	<section id="section_3" style="--i: 2">
		<h2 class="section__heading">1997</h2>
	</section>
	<section id="section_4" style="--i: 3">
		<h2 class="section__heading">2000</h2>
	</section>
	<section id="section_5" style="--i: 4">
		<h2 class="section__heading">2001</h2>
	</section>
	<section id="section_6" style="--i: 5">
		<h2 class="section__heading">2003</h2>
	</section>
	<section id="section_7" style="--i: 7">
		<h2 class="section__heading">2007</h2>
	</section>
	<section id="section_8" style="--i: 8">
		<h2 class="section__heading">2011</h2>
	</section>
	<section id="section_9" style="--i: 9">
		<h2 class="section__heading">2016</h2>
	</section>
</main>
<style>
  @media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  --activeColor: rgb(240 240 240);
  --navBgColor: rgb(37 38 41);
  --navTextColor: rgb(144 144 150);
  --mainBg: rgb(20 20 23);
  font-family: "Syncopate", sans-serif;
  min-height: 100vh;
  margin: 0;
  color: var(--navBgColor);
  background: var(--mainBg);
}

section {
  --h: calc(var(--i) * 30);
  min-height: 100vh;
  padding: 8rem 1rem max(5vh, 2rem) 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: hsl(var(--h, 0), 75%, 60%);
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--navBgColor);
  color: var(--navTextColor);
  z-index: 2;
  height: 6rem;
}
nav::after {
  content: "";
  position: absolute;
  top: 1.7rem;
  left: 0;
  width: 100%;
  height: 0.25rem;
  background: currentColor;
  pointer-events: none;
}

.marker {
  position: fixed;
  top: 1.75rem;
  left: 4rem;
  width: 1rem;
  height: 1rem;
  transform: translate3d(-50%, -50%, 0);
  background: var(--activeColor);
  border-radius: 100%;
  z-index: 2000;
}

.nav__track {
  position: relative;
  min-width: max(200rem, 200%);
  padding: 1.5rem max(100rem, 100%) 0 0;
  height: 6rem;
}

.nav__list {
  list-style: none;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}

.nav__link {
  position: relative;
  display: block;
  min-width: 8rem;
  padding: 2.25rem 1rem 0.5rem;
  text-align: center;
  color: inherit;
  text-decoration: none;
  z-index: 1;
  transition: color 150ms;
}
.nav__link:hover, .nav__link:focus {
  color: var(--activeColor);
  text-decoration: underline;
}
.nav__link::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0.65rem;
  height: 0.65rem;
  background-color: currentColor;
  border-radius: 50%;
  transform: translate3d(-50%, 0, 0);
  transform-origin: center center;
}
.nav__link span {
  display: block;
}

.section__heading {
  font-size: clamp(2rem, 12vmin, 7rem);
  line-height: 1;
  letter-spacing: -0.06em;
}
</style>
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/Draggable.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
<script>
  import lodashThrottle from "https://cdn.skypack.dev/lodash.throttle@4.1.1";

const sections = gsap.utils.toArray("section");
const track = document.querySelector("[data-draggable]");
const navLinks = gsap.utils.toArray("[data-link]");
const prefersReducedMotion = window.matchMedia(
	"(prefers-reduced-motion: reduce)"
);

const lastItemWidth = () => navLinks[navLinks.length - 1].offsetWidth;

const getUseableHeight = () =>
	document.documentElement.offsetHeight - window.innerHeight;

const getDraggableWidth = () => {
	return track.offsetWidth * 0.5 - lastItemWidth();
};

const updatePosition = () => {
	const left = track.getBoundingClientRect().left * -1;
	const width = getDraggableWidth();
	const useableHeight = getUseableHeight();
	const y = gsap.utils.mapRange(0, width, 0, useableHeight, left);

	st.scroll(y);
};

/* Create the timeline to move the track */
const tl = gsap.timeline().to(track, {
	x: () => getDraggableWidth() * -1,
	ease: "none" // remove easing - very important!
});

/* Create the ScrollTrigger instance */
const st = ScrollTrigger.create({
	animation: tl,
	scrub: 0 // sync timeline to scroll position
});

/* Create the Draggable instance */
const draggableInstance = Draggable.create(track, {
	type: "x",
	inertia: true,
	bounds: {
		minX: 0,
		maxX: getDraggableWidth() * -1
	},
	edgeResistance: 1,
	onDragStart: () => st.disable(),
	onDragEnd: () => st.enable(),
	onDrag: updatePosition,
	onThrowUpdate: updatePosition
});

/* Allow navigation via keyboard */
track.addEventListener("keyup", (e) => {
	const id = e.target.getAttribute("href");
	if (!id || e.key !== "Tab") return;

	const section = document.querySelector(id);
	const y = section.getBoundingClientRect().top + window.scrollY;

	st.scroll(y);
});

</script>