components/CenterWrapper.module.css

@@ -0,0 +1,7 @@
+.textbox {
+  width: 80%;
+  padding: calc(80rem / 16);
+  background-color: var(--secondary-background);
+  border-radius: calc(20rem / 16);
+  margin: 0 auto;
+}

components/CenterWrapper.tsx

@@ -0,0 +1,11 @@
+import React, { ReactNode } from "react";
+
+import styles from "./CenterWrapper.module.css";
+
+export interface TextboxProps {
+  children: ReactNode;
+}
+
+export function CenterWrapper({ children }: TextboxProps) {
+  return <section className={styles.textbox}>{children}</section>;
+}

pages/playground.tsx

@@ -13,6 +13,7 @@ import React from "react";
 import { PieChart } from "@/components/PieChart";
 import { QuotationCarousel } from "@/components/QuotationCarousel";
 
+import { CenterWrapper } from "../components/CenterWrapper";
 import { ColorPalette } from "../components/ColorPalette";
 import { WordCloud } from "../components/WordCloud";
 
@@ -73,6 +74,37 @@ export default function Home() {
           value: word.value,
         }))}
       />
+      <h2>
+        <code>{"<Textbox />"}</code>
+      </h2>
+      <CenterWrapper>
+        <h1>Preface</h1>
+        <p>
+          The CS Class Profile consists of data relevant to CS, CFM, and CS/BBA
+          students. These were combined with the knowledge that students in
+          these programs tend to have similar experiences, as many of the same
+          CS required courses are shared. In the standard co-op offering, CS and
+          CFM take 4 years and 2 semesters to complete, while CS/BBA can take up
+          to a full 5 years.
+        </p>
+        <p>
+          Computer Science (and the others) is known to be a very prestigious
+          program, and is very well known in Canada as well as across the world.
+          For prospective students or anyone who is interested in learning more
+          about what the students are like, this CS Class Profile will attempt
+          to answer some of your questions, and you may even learn a thing or
+          two you didn’t expect!
+        </p>
+        <p>
+          The survey questions were approved by the Institutional Analysis &
+          Planning, where all University of Waterloo stakeholders that are
+          interested in conducting a non-academic research survey involving a
+          large portion of the UWaterloo population are reviewed and approved.
+          The entirety of the survey creation and data processing was done by
+          the UW Computer Science Club, so please check us out if you enjoy what
+          you see!
+        </p>
+      </CenterWrapper>
 
       <h2>
         <code>{"<BoxPlot />"}</code>