Add Textbox

components/Textbox.module.css

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

components/Textbox.tsx

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

pages/playground.tsx

@@ -3,6 +3,7 @@ import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
 import React from "react";
 
 import { ColorPalette } from "../components/ColorPalette";
+import Textbox from "../components/Textbox";
 import { WordCloud } from "../components/WordCloud";
 
 import styles from "./playground.module.css";
@@ -59,6 +60,37 @@ export default function Home() {
           value: word.value,
         }))}
       />
+      <h2>
+        <code>{"<Textbox />"}</code>
+      </h2>
+      <Textbox>
+        <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>
+      </Textbox>
     </div>
   );
 }