feat(curriculum): add interactive examples to css typography (#65355)

Co-authored-by: Jeevankumar-S <jeevenkumar2003@email.com>
Co-authored-by: zaira <zairahira@gmail.com>

curriculum/challenges/english/blocks/review-css-typography/671a9528fc4f1487cf265444.md

@@ -5,7 +5,7 @@ challengeType: 31
 dashedName: review-css-typography
 ---
 
-# --description--
+# --interactive--
 
 ## Introduction to Typography
 
@@ -117,39 +117,75 @@ Here is an example using the `@import` statement:
 
 - **Definition**: This property is used to apply shadows to text. You need to specify the X and Y offset, which represent the horizontal and vertical distance of the shadow from the text, respectively. These values are required. Positive values of the X offset and Y offset will move the shadow right and down, respectively, while negative values will move the shadow left and up.
 
-```css
-p {
-  text-shadow: 3px 2px;
-}
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<p>Typography Shadow</p>
 ```
 
+```css
+  p {
+    text-shadow: 3px 2px;
+  }
+```
+
+:::
+
 - **Shadow Color**: You can also customize the color of the shadow by specifying this value before or after the offset. If the color is not specified, the browser will determine the color automatically, so it's usually best to set it explicitly.
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<p>Colored Shadow</p>
+```
+
 ```css
 p {
   text-shadow: 3px 2px #00ffc3;
 }
 ```
 
+:::
+
 - **Blur Radius**: The blur radius is optional but will make the shadow look a lot smoother and more subtle. The default value of the radius blur is zero. The higher the value, the bigger the blur, which means that the shadow becomes lighter.
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<p>Blurred Shadow</p>
+```
+
 ```css
 p {
   text-shadow: 3px 2px 3px #00ffc3;
 }
 ```
 
+:::
+
 - **Applying Multiple Text Shadows**: The text can have more than one shadow. The shadows will be applied in layers, from front to back, with the first shadow at the top.
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+<p>Multiple Shadows</p>
+```
+
 ```css
 p {
-  text-shadow: 
-    3px 2px 3px #00ffc3, 
-    -3px -2px 3px #0077ff, 
+  text-shadow:
+    3px 2px 3px #00ffc3,
+    -3px -2px 3px #0077ff,
     5px 4px 3px #dee7e5;
 }
 ```
 
+:::
+
 # --assignment--
 
 Review the CSS Typography topics and concepts.