Update js4/CSS sublesson to use new CodePen Compoent

content/lessons/js4/sublesson/css.mdx

@@ -21,29 +21,7 @@ language that helps us make websites beautiful by changing the color, position,
 and other properties of browser elements. CSS stands for Cascading Style Sheets.
 Here's an example:
 
-<div style={{ maxWidth: 'max-content' }}>
-  <p
-    class="codepen"
-    data-height="265"
-    data-theme-id="light"
-    data-default-tab="result"
-    data-user="c0d3codepen"
-    data-slug-hash="oNZpNKe"
-    data-pen-title="hw"
-  >
-    <span>
-      See the Pen <a href="https://codepen.io/c0d3codepen/pen/oNZpNKe">hw</a> by
-      c0d3 (<a href="https://codepen.io/c0d3codepen">@c0d3codepen</a>) on{' '}
-      <a href="https://codepen.io">CodePen</a>.
-    </span>
-  </p>
-  <script
-    async
-    src="https://cpwebassets.codepen.io/assets/embed/ei.js"
-  ></script>
-</div>
-
-<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
+<CodePen id="oNZpNKe" height="265" style={{ maxWidth: 'max-content' }} />
 
 Fortunately, CSS is a really simple language. You only need to know 3 things.
 
@@ -531,21 +509,7 @@ below are a few more common properties that can add cool effects to your pages.
 
 ## background and border-radius
 
-<p
-  class="codepen"
-  data-height="265"
-  data-theme-id="light"
-  data-default-tab="css,result"
-  data-user="c0d3codepen"
-  data-slug-hash="MWprWLg"
-  data-pen-title="radius"
->
-  <span>
-    See the Pen <a href="https://codepen.io/c0d3codepen/pen/MWprWLg">radius</a>{' '}
-    by c0d3 (<a href="https://codepen.io/c0d3codepen">@c0d3codepen</a>) on{' '}
-    <a href="https://codepen.io">CodePen</a>.
-  </span>
-</p>
+<CodePen id="MWprWLg" height="265" defaultTab="css" />
 
 - Change the value of `background` to
   `url([https://placebear.com/50/50](https://placekitten.com/200/300))` and see
@@ -596,24 +560,7 @@ create all kinds of interesting layouts.
 We'll start with 4 divs with no special positioning, which we'll adjust in the
 following examples.
 
-<p
-  class="codepen"
-  data-height="562"
-  data-theme-id="light"
-  data-default-tab="js,result"
-  data-user="c0d3codepen"
-  data-slug-hash="dyvJZEW"
-  style={{ height: '562px' }}
-  data-pen-title="position"
->
-  <span>
-    See the Pen{' '}
-    <a href="https://codepen.io/c0d3codepen/pen/dyvJZEW">position</a> by c0d3 (
-    <a href="https://codepen.io/c0d3codepen">@c0d3codepen</a>) on{' '}
-    <a href="https://codepen.io">CodePen</a>.
-  </span>
-</p>
-<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
+<CodePen id="dyvJZEW" height="562" defaultTab="js" />
 
 The code on the left will render the above UI.
 
@@ -634,22 +581,7 @@ up, we use a negative value for `top`.)
 We can also specify a `position` property with the value `fixed` to adjust the
 element.
 
-<p
-  class="codepen"
-  data-height="265"
-  data-theme-id="light"
-  data-default-tab="css,result"
-  data-user="c0d3codepen"
-  data-slug-hash="OJpzPXr"
-  data-pen-title="fixed"
->
-  <span>
-    See the Pen <a href="https://codepen.io/c0d3codepen/pen/OJpzPXr">fixed</a>{' '}
-    by c0d3 (<a href="https://codepen.io/c0d3codepen">@c0d3codepen</a>) on{' '}
-    <a href="https://codepen.io">CodePen</a>.
-  </span>
-</p>
-<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
+<CodePen id="OJpzPXr" height="265" defaultTab="css" />
 
 Notice that the `.div3` element **no longer occupies its default position**.
 Unlike when we used `relative`, the element does not take up any space in its
@@ -700,22 +632,7 @@ property to help the computer determine how the elements are ordered. An element
 with a higher `z-index` will always be drawn above an element with a lower
 z-index.
 
-<p
-  class="codepen"
-  data-height="265"
-  data-theme-id="light"
-  data-default-tab="css,result"
-  data-user="c0d3codepen"
-  data-slug-hash="rNypaGj"
-  data-pen-title="z-index"
->
-  <span>
-    See the Pen <a href="https://codepen.io/c0d3codepen/pen/rNypaGj">z-index</a>{' '}
-    by c0d3 (<a href="https://codepen.io/c0d3codepen">@c0d3codepen</a>) on{' '}
-    <a href="https://codepen.io">CodePen</a>.
-  </span>
-</p>
-<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
+<CodePen id="rNypaGj" height="265" defaultTab="css" />
 
 # Box Model
 
@@ -851,23 +768,7 @@ property.
 To understand how this property works, we can use `div`s to create 4 boxes side
 by side:
 
-<p
-  class="codepen"
-  data-height="265"
-  data-theme-id="light"
-  data-default-tab="css,result"
-  data-user="c0d3codepen"
-  data-slug-hash="QWpawoN"
-  data-pen-title="abcd"
->
-  <span>
-    See the Pen <a href="https://codepen.io/c0d3codepen/pen/QWpawoN">abcd</a> by
-    c0d3 (<a href="https://codepen.io/c0d3codepen">@c0d3codepen</a>) on{' '}
-    <a href="https://codepen.io">CodePen</a>.
-  </span>
-</p>
-
-<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
+<CodePen id="QWpawoN" height="265" defaultTab="css" />
 
 Try adding the HTML and the rest of the necessary CSS for the above layout, and
 then change the `display` to `inline` and `block` to see how the boxes change.
@@ -910,23 +811,7 @@ This code has a `div` element that has three child `h1` elements. Since each
 `h1` is a block element, it takes 100% of its parent's width, looking like the
 following:
 
-<p
-  class="codepen"
-  data-height="265"
-  data-theme-id="light"
-  data-default-tab="html,result"
-  data-user="c0d3codepen"
-  data-slug-hash="XWMVbNq"
-  data-pen-title="flexbox-justify"
->
-  <span>
-    See the Pen{' '}
-    <a href="https://codepen.io/c0d3codepen/pen/XWMVbNq">flexbox-justify</a> by
-    c0d3 (<a href="https://codepen.io/c0d3codepen">@c0d3codepen</a>) on{' '}
-    <a href="https://codepen.io">CodePen</a>.
-  </span>
-</p>
-<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>>
+<CodePen id="XWMVbNq" height="265" defaultTab="html" />
 
 What if we wanted the 3 headers to be displayed side-by-side and _together_ fill
 up 100% of the space available to them (meaning they would resize when the