diff --git a/components/ImageAndText.js b/components/ImageAndText.js
new file mode 100644
index 0000000..8e0416e
--- /dev/null
+++ b/components/ImageAndText.js
@@ -0,0 +1,57 @@
+function Button({ text, ...props }) {
+  return (
+    <a
+      className="inline-block py-2 px-5 mt-4 text-lg font-bold border-2 transition-colors duration-200 ease-in-out hover:bg-white focus:bg-white bg-secondary border-secondary text-tertiary hover:border-quinary hover:text-quinary focus:border-quinary focus:text-quinary"
+      href="#0"
+    >
+      {text}
+    </a>
+  );
+}
+
+export default function ImageAndText({
+  buttonText,
+  children,
+  imageUrl,
+  title,
+  ...props
+}) {
+  return (
+    <>
+      <div data-theme="teal" className="mx-auto max-w-6xl">
+        {/* Themes: blue, purple, teal */}
+        <h2 className="sr-only">Featured case study</h2>
+        <section className="font-sans text-black">
+          <div className="lg:flex lg:items-center fancy-corners fancy-corners--large fancy-corners--top-left fancy-corners--bottom-right">
+            <div className="flex-shrink-0 self-stretch sm:flex-basis-40 md:flex-basis-50 xl:flex-basis-60">
+              <div className="h-full">
+                <article className="h-full">
+                  <div className="h-full">
+                    <img
+                      className="object-cover h-full"
+                      src={imageUrl}
+                      width="733"
+                      height="412"
+                      alt='""'
+                      typeof="foaf:Image"
+                    />
+                  </div>
+                </article>
+              </div>
+            </div>
+
+            <div className="p-6 bg-grey">
+              <div className="leading-relaxed">
+                <h2 className="text-4xl font-bold leading-tight">{title}</h2>
+                <div className="mt-4 markup">{children}</div>
+                <p>
+                  <Button text="Explore this event" />
+                </p>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </>
+  );
+}
diff --git a/package.json b/package.json
index b5321f1..41bc28d 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "next": "12.3.0",
+    "postcss-nested": "^5.0.6",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
diff --git a/pages/index.js b/pages/index.js
index 57b69c4..577bdd5 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,58 +1,29 @@
+import ImageAndText from "../components/ImageAndText";
+
 export default function Home() {
   return (
     <div>
       <div className="flex flex-col justify-center p-24 min-h-screen bg-white">
-        {/* Themes: blue, purple, teal */}
-        <div data-theme="blue" className="mx-auto max-w-6xl">
-          <h2 className="sr-only">Featured case study</h2>
-          <section className="font-sans text-black">
-            <div className="lg:flex lg:items-center fancy-corners fancy-corners--large fancy-corners--top-left fancy-corners--bottom-right">
-              <div className="flex-shrink-0 self-stretch sm:flex-basis-40 md:flex-basis-50 xl:flex-basis-60">
-                <div className="h-full">
-                  <article className="h-full">
-                    <div className="h-full">
-                      <img
-                        className="object-cover h-full"
-                        src="https://inviqa.com/sites/default/files/styles/pullout/public/2020-08/XD-1.jpeg?h=f75d236a&itok=PBoXPDmW"
-                        width="733"
-                        height="412"
-                        alt='""'
-                        typeof="foaf:Image"
-                      />
-                    </div>
-                  </article>
-                </div>
-              </div>
-              <div className="p-6 bg-grey">
-                <div className="leading-relaxed">
-                  <h2 className="text-4xl font-bold leading-tight">
-                    CXcon: Experience Transformation
-                  </h2>
-                  <p className="mt-4">
-                    Our second CXcon in October was dedicated to experience
-                    transformation. The free one-day virtual event&nbsp;brought
-                    together 230+ heads of digital, thought leaders, and UX
-                    practitioners to discuss all aspects of experience design..
-                  </p>
-                  <p className="mt-4">
-                    In a jam-packed day filled with keynote sessions, panels,
-                    and virtual networking we explored topics including design
-                    leadership, UX ethics, designing for emotion and innovation
-                    at scale.
-                  </p>
-                  <p>
-                    <a
-                      className="inline-block py-2 px-5 mt-4 text-lg font-bold border-2 transition-colors duration-200 ease-in-out hover:bg-white focus:bg-white bg-secondary border-secondary text-tertiary hover:border-quinary hover:text-quinary focus:border-quinary focus:text-quinary"
-                      href="https://inviqa.com/cxcon-experience-transformation"
-                    >
-                      Explore this event
-                    </a>
-                  </p>
-                </div>
-              </div>
-            </div>
-          </section>
-        </div>
+        <ImageAndText
+          buttonText={"Explore this event"}
+          imageUrl={
+            "https://inviqa.com/sites/default/files/styles/pullout/public/2020-08/XD-1.jpeg?h=f75d236a&itok=PBoXPDmW"
+          }
+          title={"CXcon: Experience Transformation"}
+        >
+          <p>
+            Our second CXcon in October was dedicated to experience
+            transformation. The free one-day virtual event&nbsp;brought together
+            230+ heads of digital, thought leaders, and UX practitioners to
+            discuss all aspects of experience design..
+          </p>
+
+          <p>
+            In a jam-packed day filled with keynote sessions, panels, and
+            virtual networking we explored topics including design leadership,
+            UX ethics, designing for emotion and innovation at scale.
+          </p>
+        </ImageAndText>
       </div>
     </div>
   );
diff --git a/postcss.config.js b/postcss.config.js
index 33ad091..ab92d07 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
+    'postcss-nested': {},
     tailwindcss: {},
     autoprefixer: {},
   },
diff --git a/styles/globals.css b/styles/globals.css
index 878fcbb..e1d9960 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -3,6 +3,12 @@
 @tailwind utilities;
 
 @layer components {
+  .markup {
+    * + * {
+      @apply mt-4;
+    }
+  }
+
   .fancy-corners {
     position: relative;
     background-color: #fff;
@@ -14,7 +20,7 @@
     position: absolute;
     width: 8em;
     height: 8em;
-    background-color: theme('colors.primary');
+    background-color: theme("colors.primary");
     background-size: 100% 100%;
     background-position: 0 0;
     transform: translateZ(-1px);