diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json
index 451e9637085..dde93314c2f 100644
--- a/client/i18n/locales/english/intro.json
+++ b/client/i18n/locales/english/intro.json
@@ -4144,6 +4144,13 @@
           "In this workshop, you will build a call to action (CTA) component using Tailwind CSS."
         ]
       },
+      "workshop-tailwind-pricing-component": {
+        "title": "Build a Pricing Component",
+        "intro": [
+          "In this workshop, you will build a pricing component using Tailwind CSS.",
+          "You will practice working with Tailwind CSS grid utility classes."
+        ]
+      },
       "lab-music-shopping-cart-page": {
         "title": "Build a Music Shopping Cart Page",
         "intro": [
diff --git a/client/src/pages/learn/full-stack-developer/workshop-tailwind-pricing-component/index.md b/client/src/pages/learn/full-stack-developer/workshop-tailwind-pricing-component/index.md
new file mode 100644
index 00000000000..04149345450
--- /dev/null
+++ b/client/src/pages/learn/full-stack-developer/workshop-tailwind-pricing-component/index.md
@@ -0,0 +1,9 @@
+---
+title: Introduction to the Build a Pricing Component
+block: workshop-tailwind-pricing-component
+superBlock: full-stack-developer
+---
+
+## Introduction to the Build a Pricing Component
+
+This workshop focuses on how to work with Tailwind CSS grid utility classes to build a pricing component.
diff --git a/curriculum/challenges/_meta/workshop-tailwind-pricing-component/meta.json b/curriculum/challenges/_meta/workshop-tailwind-pricing-component/meta.json
new file mode 100644
index 00000000000..660cfbcecd0
--- /dev/null
+++ b/curriculum/challenges/_meta/workshop-tailwind-pricing-component/meta.json
@@ -0,0 +1,213 @@
+{
+  "name": "Build a Pricing Component",
+  "isUpcomingChange": true,
+  "dashedName": "workshop-tailwind-pricing-component",
+  "superBlock": "full-stack-developer",
+  "helpCategory": "HTML-CSS",
+  "blockType": "workshop",
+  "blockLayout": "challenge-grid",
+  "challengeOrder": [
+    {
+      "id": "686383abac6c625a84458ea9",
+      "title": "Step 1"
+    },
+    {
+      "id": "686386e76197458b7dfd52eb",
+      "title": "Step 2"
+    },
+    {
+      "id": "686386e76197458b7dfd52ec",
+      "title": "Step 3"
+    },
+    {
+      "id": "686386e76197458b7dfd52ed",
+      "title": "Step 4"
+    },
+    {
+      "id": "686386e76197458b7dfd52ee",
+      "title": "Step 5"
+    },
+    {
+      "id": "686386e76197458b7dfd52ef",
+      "title": "Step 6"
+    },
+    {
+      "id": "686386e76197458b7dfd52f9",
+      "title": "Step 7"
+    },
+    {
+      "id": "6864d9999f8a4e3f0d569a3f",
+      "title": "Step 8"
+    },
+    {
+      "id": "6864dafe72087c517e80f6e0",
+      "title": "Step 9"
+    },
+    {
+      "id": "6864dcea9ad9f86942ff0158",
+      "title": "Step 10"
+    },
+    {
+      "id": "6864df7ec0fc508ac3828ab5",
+      "title": "Step 11"
+    },
+    {
+      "id": "6864e31ef17310b9e6aa376e",
+      "title": "Step 12"
+    },
+    {
+      "id": "6864e506a6f773d5e300c0b4",
+      "title": "Step 13"
+    },
+    {
+      "id": "6864e996adaf0b13437f1d11",
+      "title": "Step 14"
+    },
+    {
+      "id": "6864e580f94941dcfa2bb26d",
+      "title": "Step 15"
+    },
+    {
+      "id": "6864ebcd123f7c335e92d6dd",
+      "title": "Step 16"
+    },
+    {
+      "id": "6864ed58edec4b4aaeb571cc",
+      "title": "Step 17"
+    },
+    {
+      "id": "6864f28c46eb6f00dccd5c54",
+      "title": "Step 18"
+    },
+    {
+      "id": "6864f340223afc0f133868d1",
+      "title": "Step 19"
+    },
+    {
+      "id": "6864f66df54d9d3abcd4fd31",
+      "title": "Step 20"
+    },
+    {
+      "id": "6864f704409f85463386cd91",
+      "title": "Step 21"
+    },
+    {
+      "id": "6864f7985a9b7e5285e27257",
+      "title": "Step 22"
+    },
+    {
+      "id": "6864f81018a0085ae30afa9b",
+      "title": "Step 23"
+    },
+    {
+      "id": "6864f8fef1584f68696e8e24",
+      "title": "Step 24"
+    },
+    {
+      "id": "6864fa68aae44b80f7d0863c",
+      "title": "Step 25"
+    },
+    {
+      "id": "6864fb24b8070f904768c24f",
+      "title": "Step 26"
+    },
+    {
+      "id": "68667227c6b33aaf41d4e086",
+      "title": "Step 27"
+    },
+    {
+      "id": "6866733f0b8f85bcb9587646",
+      "title": "Step 28"
+    },
+    {
+      "id": "6866740a0f532cc7e9e21877",
+      "title": "Step 29"
+    },
+    {
+      "id": "6866771fa1b958f7560a6863",
+      "title": "Step 30"
+    },
+    {
+      "id": "686678efc0d9e60eb59ca029",
+      "title": "Step 31"
+    },
+    {
+      "id": "68667a42c6784620c088505c",
+      "title": "Step 32"
+    },
+    {
+      "id": "68667b354cdc432f3f83c846",
+      "title": "Step 33"
+    },
+    {
+      "id": "68667bdd7e26613a6d013ac4",
+      "title": "Step 34"
+    },
+    {
+      "id": "68667c33e3c13940ce87c40d",
+      "title": "Step 35"
+    },
+    {
+      "id": "68667c8eca7580479ead76a0",
+      "title": "Step 36"
+    },
+    {
+      "id": "68667cefaa5ad54e5ec212a4",
+      "title": "Step 37"
+    },
+    {
+      "id": "68667da4251a7c59e083bb7e",
+      "title": "Step 38"
+    },
+    {
+      "id": "68667e17e51bbf62bc6e1737",
+      "title": "Step 39"
+    },
+    {
+      "id": "68667f8aa360b17a01982b7c",
+      "title": "Step 40"
+    },
+    {
+      "id": "68668014d6a84384018dc302",
+      "title": "Step 41"
+    },
+    {
+      "id": "6867c7b1f41ee104cf4aaa16",
+      "title": "Step 42"
+    },
+    {
+      "id": "6867c8a8185485144ebbb453",
+      "title": "Step 43"
+    },
+    {
+      "id": "6867c93aefc7751d197d1187",
+      "title": "Step 44"
+    },
+    {
+      "id": "6867c9fd16b48f2abe22bdaa",
+      "title": "Step 45"
+    },
+    {
+      "id": "68755a4d49de76991ec3763d",
+      "title": "Step 46"
+    },
+    {
+      "id": "6867caa0dbbeb93570ec0069",
+      "title": "Step 47"
+    },
+    {
+      "id": "6867cb70e797d142df4b88e5",
+      "title": "Step 48"
+    },
+    {
+      "id": "6867cbfbbb4a9f4bc73b01e6",
+      "title": "Step 49"
+    },
+    {
+      "id": "6867cca6236f87573044a39c",
+      "title": "Step 50"
+    }
+  ],
+  "usesMultifileEditor": true,
+  "hasEditableBoundaries": true
+}
\ No newline at end of file
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/686383abac6c625a84458ea9.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/686383abac6c625a84458ea9.md
new file mode 100644
index 00000000000..e896041a606
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/686383abac6c625a84458ea9.md
@@ -0,0 +1,50 @@
+---
+id: 686383abac6c625a84458ea9
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+In this workshop, you will learn more about Tailwind CSS by using its grid utility classes to build a pricing component.
+
+The basic HTML boilerplate has been provided for you. Start by creating an `h1` element with the text `Choose your listening plan`.
+
+# --hints--
+
+You should create an `h1` element.
+
+```js
+assert.exists(document.querySelector("h1"));
+```
+
+Your `h1` element should have the text `Choose your listening plan`.
+
+```js
+assert.equal(document.querySelector("h1")?.textContent, "Choose your listening plan");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body>
+    <main>
+    --fcc-editable-region--
+    
+    --fcc-editable-region--
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/686386e76197458b7dfd52eb.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/686386e76197458b7dfd52eb.md
new file mode 100644
index 00000000000..186e63b9ca6
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/686386e76197458b7dfd52eb.md
@@ -0,0 +1,62 @@
+---
+id: 686386e76197458b7dfd52eb
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Create a `div` element under the `h1`. Inside that `div`, create another `div` element, and nest another `div` element inside it.
+
+And inside the innermost `div`, create an `h2` element with the text `Listener`. This will represent the first pricing plan.
+
+# --hints--
+
+You should create a `div` element.
+
+```js
+assert.exists(document.querySelector("div"));
+```
+
+You should create another `div` element inside the outer `div`.
+
+```js
+assert.exists(document.querySelector("div > div"));
+```
+
+You should create another `div` element inside the inner `div`.
+
+```js
+assert.exists(document.querySelector("div > div > div"));
+```
+
+You should create an `h2` with the text `Listener` inside the innermost `div` element.
+
+```js
+assert.equal(document.querySelector("div > div > div > h2")?.textContent, "Listener");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body>
+    <main>
+      <h1>Choose your listening plan</h1>
+    --fcc-editable-region--
+      
+    --fcc-editable-region--
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/686386e76197458b7dfd52ec.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/686386e76197458b7dfd52ec.md
new file mode 100644
index 00000000000..83f0d47ad95
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/686386e76197458b7dfd52ec.md
@@ -0,0 +1,59 @@
+---
+id: 686386e76197458b7dfd52ec
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Under the `h2`, create a `p` element with the text `$0`. Then, inside that `p` element and after the text, create a `span` element with the text `/month`.
+
+# --hints--
+
+You should create a `p` element with the text `$0`.
+
+```js
+const p = document.querySelector("p");
+const pTextBeforeSpan = p.childNodes[0].textContent.trim();
+
+assert.equal(pTextBeforeSpan, "$0");
+```
+
+You should create a `span` element with the text `/month` inside the `p` element.
+
+```js
+const spanText = document.querySelector("p > span")?.textContent;
+assert.equal(spanText, "/month");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body>
+    <main>
+      <h1>Choose your listening plan</h1>
+      <div>
+        <div>
+          <div>
+            <h2>Listener</h2>
+            --fcc-editable-region--
+            
+            --fcc-editable-region--
+          </div>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/686386e76197458b7dfd52ed.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/686386e76197458b7dfd52ed.md
new file mode 100644
index 00000000000..364c0f1fd33
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/686386e76197458b7dfd52ed.md
@@ -0,0 +1,69 @@
+---
+id: 686386e76197458b7dfd52ed
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Under the `p` element you just added, create another `p` element with the text `Start exploring millions of songs with basic features and ads.`. Under that, create an empty `ul` element.
+
+# --hints--
+
+You should create another `p` element with the text `Start exploring millions of songs with basic features and ads.`.
+
+```js
+const paragraphs = document.querySelectorAll("p")
+
+const targetP = Array.from(paragraphs).find(p =>
+  p.textContent === "Start exploring millions of songs with basic features and ads."
+)
+assert.exists(targetP)
+```
+
+You should create an empty `ul` element under the `p` element.
+
+```js
+const paragraphs = document.querySelectorAll("p")
+
+const targetP = Array.from(paragraphs).find(p =>
+  p.textContent === "Start exploring millions of songs with basic features and ads."
+)
+
+const ul = targetP.nextElementSibling
+assert.equal(ul?.tagName, "UL")
+assert.isEmpty(ul?.innerHTML.trim())
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body>
+    <main>
+      <h1>Choose your listening plan</h1>
+      <div>
+        <div>
+          <div>
+            <h2>Listener</h2>
+            <p>$0<span>/month</span></p>
+            --fcc-editable-region--
+            
+            --fcc-editable-region--
+          </div>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/686386e76197458b7dfd52ee.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/686386e76197458b7dfd52ee.md
new file mode 100644
index 00000000000..8087f54886e
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/686386e76197458b7dfd52ee.md
@@ -0,0 +1,91 @@
+---
+id: 686386e76197458b7dfd52ee
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Inside the `ul`, create two list items. Inside the first list item, create a `span` element and add the HTML entity `&#10003;` as its text. Right after that `span` but within the list item, add the text `Ad-supported streaming`.
+
+Inside the second list item, create a `span` element and add the entity `&#10003;` as its text. Right after that `span`, but within the list item, add the text `Curated playlists`.
+
+# --hints--
+
+You should have two list items inside your `ul` element.
+
+```js
+assert.lengthOf(document.querySelectorAll("ul > li"), 2)
+```
+
+Your first `li` element should have a `span` element with the HTML character entity `&#10003;` in it.
+
+```js
+const listItems = document.querySelectorAll("ul > li")
+const firstSpan = listItems[0].querySelector("span")
+
+assert.equal(firstSpan?.textContent, "✓")
+```
+
+Your first `li` element should have the text `Ad-supported streaming` just after the `span` element.
+
+```js
+const listItems = document.querySelectorAll("ul > li");
+const span = listItems[0].querySelector("span");
+
+assert.equal(span.nextSibling?.textContent.trim(), "Ad-supported streaming");
+```
+
+Your second `li` element should have a `span` element with the HTML character entity `&#10003;` in it.
+
+```js
+const listItems = document.querySelectorAll("ul > li")
+const secondSpan = listItems[1].querySelector("span")
+
+assert.equal(secondSpan?.textContent, "✓")
+```
+
+Your second `li` element should have the text `Curated playlists` just after the `span` element.
+
+```js
+const listItems = document.querySelectorAll("ul > li");
+const span = listItems[1].querySelector("span");
+
+assert.equal(span.nextSibling?.textContent.trim(), "Curated playlists");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body>
+    <main>
+      <h1>Choose your listening plan</h1>
+      <div>
+        <div>
+          <div>
+            <h2>Listener</h2>
+            <p>$0<span>/month</span></p>
+            <p>Start exploring millions of songs with basic features and ads.</p>
+            <ul>
+            --fcc-editable-region--
+              
+            --fcc-editable-region--
+            </ul>
+          </div>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/686386e76197458b7dfd52ef.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/686386e76197458b7dfd52ef.md
new file mode 100644
index 00000000000..9197841438d
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/686386e76197458b7dfd52ef.md
@@ -0,0 +1,74 @@
+---
+id: 686386e76197458b7dfd52ef
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Now you'll create a CTA button. A Call to Action (CTA) is a button or link designed to prompt a user to take a specific action, in this case, to start listening.
+
+Outside the innermost `div`, create an anchor element with an `href` of `#` and the text `Start listening`.
+
+That concludes the HTML for the first pricing card.
+
+# --hints--
+
+You should create an anchor element.
+
+```js
+assert.exists(document.querySelector("a"))
+```
+
+Your anchor element should have an `href` set to `#`.
+
+```js
+const link = document.querySelector("a")
+assert.equal(link?.getAttribute("href"), "#")
+```
+
+Your anchor element should have the text `Start listening`.
+
+```js
+assert.equal(document.querySelector("a")?.textContent, "Start listening")
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body>
+    <main>
+      <h1>Choose your listening plan</h1>
+      <div>
+        <div>
+          <div>
+            <h2>Listener</h2>
+            <p>$0<span>/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-supported streaming</li>
+              <li><span>&#10003;</span>Curated playlists</li>
+            </ul>
+          </div>
+          --fcc-editable-region--
+          
+          --fcc-editable-region-- 
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/686386e76197458b7dfd52f9.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/686386e76197458b7dfd52f9.md
new file mode 100644
index 00000000000..ffdb6dd7761
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/686386e76197458b7dfd52f9.md
@@ -0,0 +1,102 @@
+---
+id: 686386e76197458b7dfd52f9
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+The rest of the HTML has been provided for you. That includes the premium and family plan cards. So, it's time to style the HTML elements with Tailwind CSS.
+
+Begin by giving the whole page a slightly grey background by assigning the `body` element a class of `bg-gray-100`.
+
+# --hints--
+
+Your body element should have the class `bg-gray-100`.
+
+```js
+const bodyEl = document.querySelector("body");
+assert.equal(bodyEl.className, "bg-gray-100");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  --fcc-editable-region--
+  <body>
+  --fcc-editable-region--
+    <main>
+      <h1>Choose your listening plan</h1>
+      <div>
+        <div>
+          <div>
+            <h2>Listener</h2>
+            <p>$0<span>/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-supported streaming</li>
+              <li><span>&#10003;</span>Curated playlists</li>
+            </ul>
+          </div>
+          <a href="#">Start listening</a>
+        </div>
+        <div>
+          <div>Most Popular</div>
+          <div>
+            <h2>Premium</h2>
+            <p>$9.99<span>/month</span></p>
+            <p>
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+          </div>
+          <a href="#">Go Premium</a>
+        </div>
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864d9999f8a4e3f0d569a3f.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864d9999f8a4e3f0d569a3f.md
new file mode 100644
index 00000000000..09df0f2bd1c
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864d9999f8a4e3f0d569a3f.md
@@ -0,0 +1,133 @@
+---
+id: 6864d9999f8a4e3f0d569a3f
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Next, make the `h1` text distinguishable by assigning it a `class` set to `text-3xl` to make it bigger, `text-center` to center it, `font-semibold` to make it bolder, `text-gray-900` to make it darker, and `md:text-5xl` to make it bigger on medium and larger screen sizes.
+
+# --hints--
+
+Your `h1` element should have the class `text-3xl`.
+
+```js
+const h1El = document.querySelector("h1")
+
+assert.isTrue(h1El.classList.contains("text-3xl"))
+```
+
+Your `h1` element should have the class `text-center`.
+
+```js
+const h1El = document.querySelector("h1")
+
+assert.isTrue(h1El.classList.contains("text-center"))
+```
+
+Your `h1` element should have the class `font-semibold`.
+
+```js
+const h1El = document.querySelector("h1")
+
+assert.isTrue(h1El.classList.contains("font-semibold"))
+```
+
+Your `h1` element should have the class `text-gray-900`.
+
+```js
+const h1El = document.querySelector("h1")
+
+assert.isTrue(h1El.classList.contains("text-gray-900"))
+```
+
+Your `h1` element should have the class `md:text-5xl`.
+
+```js
+const h1El = document.querySelector("h1")
+
+assert.isTrue(h1El.classList.contains("md:text-5xl"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      --fcc-editable-region--
+      <h1>Choose your listening plan</h1>
+      --fcc-editable-region--
+      <div>
+        <div>
+          <div>
+            <h2>Listener</h2>
+            <p>$0<span>/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-supported streaming</li>
+              <li><span>&#10003;</span>Curated playlists</li>
+            </ul>
+          </div>
+          <a href="#">Start listening</a>
+        </div>
+        <div>
+          <div>Most Popular</div>
+          <div>
+            <h2>Premium</h2>
+            <p>$9.99<span>/month</span></p>
+            <p>
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+          </div>
+          <a href="#">Go Premium</a>
+        </div>
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864dafe72087c517e80f6e0.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864dafe72087c517e80f6e0.md
new file mode 100644
index 00000000000..89d619c95aa
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864dafe72087c517e80f6e0.md
@@ -0,0 +1,111 @@
+---
+id: 6864dafe72087c517e80f6e0
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+The `h1` text is too close to the top of the page and the text below it, so you should add some spacing around it.
+
+In addition to the existing ones, assign the utility classes `mt-8 ` and `mb-12` to the `h1`.
+
+# --hints--
+
+Your `h1` element should have the class `mt-8`.
+
+```js
+const h1El = document.querySelector("h1")
+
+assert.isTrue(h1El.classList.contains("mt-8"))
+```
+
+Your `h1` element should have the class `mb-12`.
+
+```js
+const h1El = document.querySelector("h1")
+
+assert.isTrue(h1El.classList.contains("mb-12"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+--fcc-editable-region--
+      <h1 class="text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+--fcc-editable-region--
+      <div>
+        <div>
+          <div>
+            <h2>Listener</h2>
+            <p>$0<span>/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-supported streaming</li>
+              <li><span>&#10003;</span>Curated playlists</li>
+            </ul>
+          </div>
+          <a href="#">Start listening</a>
+        </div>
+        <div>
+          <div>Most Popular</div>
+          <div>
+            <h2>Premium</h2>
+            <p>$9.99<span>/month</span></p>
+            <p>
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+          </div>
+          <a href="#">Go Premium</a>
+        </div>
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864dcea9ad9f86942ff0158.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864dcea9ad9f86942ff0158.md
new file mode 100644
index 00000000000..c57fd121742
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864dcea9ad9f86942ff0158.md
@@ -0,0 +1,113 @@
+---
+id: 6864dcea9ad9f86942ff0158
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+It's time to work on the `div` element that wraps the three pricing cards. To arrange the cards, you can use Tailwind CSS's grid utility classes.
+
+Here's how to assign a display of `grid` to an element using Tailwind:
+
+```html
+<div class="grid">
+  <div>Grid Item</div>
+  <div>Grid Item</div>
+  <div>Grid Item</div>
+</div>
+```
+
+Assign a class of `grid` to the `div` element that wraps the pricing cards.
+
+# --hints--
+
+Your `div` element should have the class `grid`.
+
+```js
+const firstDiv = document.querySelector("div")
+
+assert.isTrue(firstDiv.classList.contains("grid"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      --fcc-editable-region--
+      <div>
+      --fcc-editable-region--
+        <div>
+          <div>
+            <h2>Listener</h2>
+            <p>$0<span>/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-supported streaming</li>
+              <li><span>&#10003;</span>Curated playlists</li>
+            </ul>
+          </div>
+          <a>Start listening</a>
+        </div>
+        <div>
+          <div>Most Popular</div>
+          <div>
+            <h2>Premium</h2>
+            <p>$9.99<span>/month</span></p>
+            <p>
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+          </div>
+          <a>Go Premium</a>
+        </div>
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864df7ec0fc508ac3828ab5.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864df7ec0fc508ac3828ab5.md
new file mode 100644
index 00000000000..428f6a7b9b7
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864df7ec0fc508ac3828ab5.md
@@ -0,0 +1,123 @@
+---
+id: 6864df7ec0fc508ac3828ab5
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+From regular CSS, you learned that assigning a display of `grid` to an element does not do anything until you specify the grid rows and columns. That's how it works in Tailwind, too.
+
+In Tailwind, to assign a grid row and grid column, you'd use their respective utility classes like this:
+
+```html
+<div class="grid grid-cols-[num] grid-rows-[num]">
+  <div>Grid Item</div>
+  <div>Grid Item</div>
+  <div>Grid Item</div>
+</div>
+```
+
+Assign the wrapper `div` the utility classes `grid-cols-1` and `md:grid-cols-3`.
+
+The `grid-cols-1` class arranges the three items in a single column, stacking them vertically. On medium and larger screens, `md:grid-cols-3` switches the layout to three columns, displaying the items side by side.
+
+# --hints--
+
+Your `div` element should have the class `grid-cols-1`.
+
+```js
+const firstDiv = document.querySelector("div")
+
+assert.isTrue(firstDiv.classList.contains("grid-cols-1"))
+```
+
+Your `div` element should have the class `md:grid-cols-3`.
+
+```js
+const firstDiv = document.querySelector("div")
+
+assert.isTrue(firstDiv.classList.contains("md:grid-cols-3"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+--fcc-editable-region--
+      <div class="grid ">
+--fcc-editable-region--
+        <div>
+          <div>
+            <h2>Listener</h2>
+            <p>$0<span>/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-supported streaming</li>
+              <li><span>&#10003;</span>Curated playlists</li>
+            </ul>
+          </div>
+          <a href="#">Start listening</a>
+        </div>
+        <div>
+          <div>Most Popular</div>
+          <div>
+            <h2>Premium</h2>
+            <p>$9.99<span>/month</span></p>
+            <p>
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+          </div>
+          <a href="#">Go Premium</a>
+        </div>
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864e31ef17310b9e6aa376e.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864e31ef17310b9e6aa376e.md
new file mode 100644
index 00000000000..9979fc69511
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864e31ef17310b9e6aa376e.md
@@ -0,0 +1,113 @@
+---
+id: 6864e31ef17310b9e6aa376e
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+The grid items are too close to the left and right edges of the page, so you should work on the spacing.
+
+Assign the class `max-w-6xl` to the `div` to set a fixed width of `72rem` and prevent the items from stretching too far across the page.
+
+As that will push all of them to the left, add `mx-auto` to the `div` to center the items horizontally.
+
+# --hints--
+
+Your `div` element should have the class `max-w-6xl`.
+
+```js
+const firstDiv = document.querySelector("div")
+
+assert.isTrue(firstDiv.classList.contains("max-w-6xl"))
+```
+
+Your `div` element should have the class `mx-auto`.
+
+```js
+const firstDiv = document.querySelector("div")
+
+assert.isTrue(firstDiv.classList.contains("mx-auto"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+--fcc-editable-region--
+      <div class="grid grid-cols-1 md:grid-cols-3 ">
+--fcc-editable-region--
+        <div>
+          <div>
+            <h2>Listener</h2>
+            <p>$0<span>/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-supported streaming</li>
+              <li><span>&#10003;</span>Curated playlists</li>
+            </ul>
+          </div>
+          <a href="#">Start listening</a>
+        </div>
+        <div>
+          <div>Most Popular</div>
+          <div>
+            <h2>Premium</h2>
+            <p>$9.99<span>/month</span></p>
+            <p>
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+          </div>
+          <a href="#">Go Premium</a>
+        </div>
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864e506a6f773d5e300c0b4.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864e506a6f773d5e300c0b4.md
new file mode 100644
index 00000000000..fe11c177644
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864e506a6f773d5e300c0b4.md
@@ -0,0 +1,109 @@
+---
+id: 6864e506a6f773d5e300c0b4
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+At this point, the items are too close to each other. Add `gap-8` to create some space between them, and use `mt-16` to push them down from the top a bit.
+
+# --hints--
+
+Your `div` element should have the class `gap-8`.
+
+```js
+const firstDiv = document.querySelector("div")
+
+assert.isTrue(firstDiv.classList.contains("gap-8"))
+```
+
+Your `div` element should have the class `mt-16`.
+
+```js
+const firstDiv = document.querySelector("div")
+
+assert.isTrue(firstDiv.classList.contains("mt-16"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+--fcc-editable-region--
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto">
+--fcc-editable-region--
+        <div>
+          <div>
+            <h2>Listener</h2>
+            <p>$0<span>/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-supported streaming</li>
+              <li><span>&#10003;</span>Curated playlists</li>
+            </ul>
+          </div>
+          <a href="#">Start listening</a>
+        </div>
+        <div>
+          <div>Most Popular</div>
+          <div>
+            <h2>Premium</h2>
+            <p>$9.99<span>/month</span></p>
+            <p>
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+          </div>
+          <a href="#">Go Premium</a>
+        </div>
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864e580f94941dcfa2bb26d.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864e580f94941dcfa2bb26d.md
new file mode 100644
index 00000000000..9bfaa05391b
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864e580f94941dcfa2bb26d.md
@@ -0,0 +1,122 @@
+---
+id: 6864e580f94941dcfa2bb26d
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Now you should work on the placement of the items inside the card for the plan.
+
+To do this, set the container to use grid display and specify a custom row size using square brackets in your Tailwind class.
+
+Here's how you can set a custom grid row using fractional units:
+
+```html
+<div class="grid grid-rows-[2fr]">
+  <div>Takes one part</div>
+  <div>Takes two parts of available space</div>
+</div>
+```
+
+Give the outer `div` for the plan the utility classes `grid` and `grid-rows-[1fr_auto]`.
+
+# --hints--
+
+Your `div` element should have the class `grid`.
+
+```js
+const listenerPlanWrapper = document.querySelectorAll("div")[1]
+
+assert.isTrue(listenerPlanWrapper.classList.contains("grid"))
+```
+
+Your `div` element should have the class `grid-rows-[1fr_auto]`.
+
+```js
+const listenerPlanWrapper = document.querySelectorAll("div")[1]
+
+assert.isTrue(listenerPlanWrapper.classList.contains("grid-rows-[1fr_auto]"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        --fcc-editable-region--
+        <div class="bg-gray-100 ring-1 ring-gray-300 ">
+          <div>
+            <h2>Listener</h2>
+            <p>$0<span>/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-supported streaming</li>
+              <li><span>&#10003;</span>Curated playlists</li>
+            </ul>
+          </div>
+          <a href="#">Start listening</a>
+        </div>
+        --fcc-editable-region--
+        <div>
+          <div>Most Popular</div>
+          <div>
+            <h2>Premium</h2>
+            <p>$9.99<span>/month</span></p>
+            <p>
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+          </div>
+          <a href="#">Go Premium</a>
+        </div>
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864e996adaf0b13437f1d11.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864e996adaf0b13437f1d11.md
new file mode 100644
index 00000000000..ed7ac3c5017
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864e996adaf0b13437f1d11.md
@@ -0,0 +1,119 @@
+---
+id: 6864e996adaf0b13437f1d11
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Now, you should move to styling the elements for the **Listener plan**.
+
+Give the outer `div` for the plan the classes `bg-gray-100`, `ring-1` to create a thick outline around the `div`, and `ring-gray-300` to assign a dark color to that outline.
+
+# --hints--
+
+Your `div` element should have the class `bg-gray-100`.
+
+```js
+const listenerPlanWrapper = document.querySelectorAll("div")[1]
+
+assert.isTrue(listenerPlanWrapper.classList.contains("bg-gray-100"))
+```
+
+Your `div` element should have the class `ring-1`.
+
+```js
+const listenerPlanWrapper = document.querySelectorAll("div")[1]
+
+assert.isTrue(listenerPlanWrapper.classList.contains("ring-1"))
+```
+
+Your `div` element should have the class `ring-gray-300`.
+
+```js
+const listenerPlanWrapper = document.querySelectorAll("div")[1]
+
+assert.isTrue(listenerPlanWrapper.classList.contains("ring-gray-300"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        --fcc-editable-region--
+        <div>
+          <div>
+            <h2>Listener</h2>
+            <p>$0<span>/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-supported streaming</li>
+              <li><span>&#10003;</span>Curated playlists</li>
+            </ul>
+          </div>
+          <a href="#">Start listening</a>
+        </div>
+        --fcc-editable-region--
+        <div>
+          <div>Most Popular</div>
+          <div>
+            <h2>Premium</h2>
+            <p>$9.99<span>/month</span></p>
+            <p>
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+          </div>
+          <a href="#">Go Premium</a>
+        </div>
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864ebcd123f7c335e92d6dd.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864ebcd123f7c335e92d6dd.md
new file mode 100644
index 00000000000..53368b36b02
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864ebcd123f7c335e92d6dd.md
@@ -0,0 +1,119 @@
+---
+id: 6864ebcd123f7c335e92d6dd
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Now you should work on the spacing for the items inside that plan.
+
+Add the utility class `rounded-xl` to remove the sharp edges for the ring, `p-8` to increase the padding, and `gap-6` to create space between the content and the CTA button.
+
+# --hints--
+
+Your `div` element should have the class `rounded-xl`.
+
+```js
+const listenerPlanWrapper = document.querySelectorAll("div")[1]
+
+assert.isTrue(listenerPlanWrapper.classList.contains("rounded-xl"))
+```
+
+Your `div` element should have the class `p-8`.
+
+```js
+const listenerPlanWrapper = document.querySelectorAll("div")[1]
+
+assert.isTrue(listenerPlanWrapper.classList.contains("p-8"))
+```
+
+Your `div` element should have the class `gap-6`.
+
+```js
+const listenerPlanWrapper = document.querySelectorAll("div")[1]
+
+assert.isTrue(listenerPlanWrapper.classList.contains("gap-6"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+--fcc-editable-region--
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] ">
+          <div>
+            <h2>Listener</h2>
+            <p>$0<span>/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-supported streaming</li>
+              <li><span>&#10003;</span>Curated playlists</li>
+            </ul>
+          </div>
+          <a href="#">Start listening</a>
+        </div>
+--fcc-editable-region--
+        <div>
+          <div>Most Popular</div>
+          <div>
+            <h2>Premium</h2>
+            <p>$9.99<span>/month</span></p>
+            <p>
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+          </div>
+          <a href="#">Go Premium</a>
+        </div>
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864ed58edec4b4aaeb571cc.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864ed58edec4b4aaeb571cc.md
new file mode 100644
index 00000000000..e0531fd568d
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864ed58edec4b4aaeb571cc.md
@@ -0,0 +1,119 @@
+---
+id: 6864ed58edec4b4aaeb571cc
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Moving to the inner `div` in the **Listener plan**, give it the classes `grid`, `grid-rows-[auto_auto_auto_1fr]`, and `gap-y-2`.
+
+These classes will make the inner `div` a grid container, define four rows that stack on top of each other, with the first three set to `auto` and the last taking up the remaining spaces, and finally add a spacing of `0.5rem` between the rows.
+
+# --hints--
+
+Your inner `div` element should have the class `grid`.
+
+```js
+const listenerPlanInnerDiv = document.querySelectorAll("div")[2]
+
+assert.isTrue(listenerPlanInnerDiv.classList.contains("grid"))
+```
+
+Your inner `div` element should have the class `grid-rows-[auto_auto_auto_1fr]`.
+
+```js
+const listenerPlanInnerDiv = document.querySelectorAll("div")[2]
+
+assert.isTrue(listenerPlanInnerDiv.classList.contains("grid-rows-[auto_auto_auto_1fr]"))
+```
+
+Your inner `div` element should have the class `gap-y-2`.
+
+```js
+const listenerPlanInnerDiv = document.querySelectorAll("div")[2]
+
+assert.isTrue(listenerPlanInnerDiv.classList.contains("gap-y-2"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+--fcc-editable-region--
+          <div>
+            <h2>Listener</h2>
+            <p>$0<span>/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-supported streaming</li>
+              <li><span>&#10003;</span>Curated playlists</li>
+            </ul>
+          </div>
+--fcc-editable-region--
+          <a href="#">Start listening</a>
+        </div>
+        <div>
+          <div>Most Popular</div>
+          <div>
+            <h2>Premium</h2>
+            <p>$9.99<span>/month</span></p>
+            <p>
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+          </div>
+          <a href="#">Go Premium</a>
+        </div>
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864f28c46eb6f00dccd5c54.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864f28c46eb6f00dccd5c54.md
new file mode 100644
index 00000000000..9d16b27a381
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864f28c46eb6f00dccd5c54.md
@@ -0,0 +1,120 @@
+---
+id: 6864f28c46eb6f00dccd5c54
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Moving to the `h2` inside the **Listener plan**, give it the utility class `text-lg` to make it larger, `font-semibold` to make it bolder, and `text-indigo-600` to give it a beautiful indigo color.
+
+# --hints--
+
+Your `h2` element should have the class `text-lg`.
+
+```js
+const h2Els = document.querySelectorAll("h2")
+const listenerH2 = Array.from(h2Els).find(h2 => h2.textContent === "Listener")
+
+assert.isTrue(listenerH2.classList.contains("text-lg"))
+```
+
+Your `h2` element should have the class `font-semibold`.
+
+```js
+const h2Els = document.querySelectorAll("h2")
+const listenerH2 = Array.from(h2Els).find(h2 => h2.textContent === "Listener")
+
+assert.isTrue(listenerH2.classList.contains("font-semibold"))
+```
+
+Your `h2` element should have the class `text-indigo-600`.
+
+```js
+const h2Els = document.querySelectorAll("h2")
+const listenerH2 = Array.from(h2Els).find(h2 => h2.textContent === "Listener")
+
+assert.isTrue(listenerH2.classList.contains("text-indigo-600"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            --fcc-editable-region--
+            <h2>Listener</h2>
+            --fcc-editable-region--
+            <p>$0<span>/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-supported streaming</li>
+              <li><span>&#10003;</span>Curated playlists</li>
+            </ul>
+          </div>
+          <a href="#">Start listening</a>
+        </div>
+        <div>
+          <div>Most Popular</div>
+          <div>
+            <h2>Premium</h2>
+            <p>$9.99<span>/month</span></p>
+            <p>
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+          </div>
+          <a href="#">Go Premium</a>
+        </div>
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864f340223afc0f133868d1.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864f340223afc0f133868d1.md
new file mode 100644
index 00000000000..4844f8f0aea
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864f340223afc0f133868d1.md
@@ -0,0 +1,120 @@
+---
+id: 6864f340223afc0f133868d1
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Moving to the price text inside the `p` and `span`, give the `p` element the classes `text-4xl`, `font-bold`, and `text-gray-900` so the price is more visible.
+
+# --hints--
+
+Your `p` element should have the class `text-4xl`.
+
+```js
+const PEls = document.querySelectorAll("p")
+const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$0"))
+
+assert.isTrue(targetP.classList.contains("text-4xl"))
+```
+
+Your `p` element should have the class `font-bold`.
+
+```js
+const PEls = document.querySelectorAll("p")
+const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$0"))
+
+assert.isTrue(targetP.classList.contains("font-bold"))
+```
+
+Your `p` element should have the class `text-gray-900`.
+
+```js
+const PEls = document.querySelectorAll("p")
+const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$0"))
+
+assert.isTrue(targetP.classList.contains("text-gray-900"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+--fcc-editable-region--
+            <p>$0<span>/month</span></p>
+--fcc-editable-region--
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-supported streaming</li>
+              <li><span>&#10003;</span>Curated playlists</li>
+            </ul>
+          </div>
+          <a href="#">Start listening</a>
+        </div>
+        <div>
+          <div>Most Popular</div>
+          <div>
+            <h2>Premium</h2>
+            <p>$9.99<span>/month</span></p>
+            <p>
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+          </div>
+          <a href="#">Go Premium</a>
+        </div>
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864f66df54d9d3abcd4fd31.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864f66df54d9d3abcd4fd31.md
new file mode 100644
index 00000000000..4c98a775ee2
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864f66df54d9d3abcd4fd31.md
@@ -0,0 +1,123 @@
+---
+id: 6864f66df54d9d3abcd4fd31
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+For the `span` inside the `p` element that has the text `/month`, give it the classes `text-base`, `font-medium`, and `text-gray-500`. This will distinguish it from the price itself by making the text lighter.
+
+# --hints--
+
+Your `span` element should have the class `text-base`.
+
+```js
+const PEls = document.querySelectorAll("p")
+const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$0"))
+const durationSpan = targetP.querySelector("span")
+
+assert.isTrue(durationSpan.classList.contains("text-base"))
+```
+
+Your `span` element should have the class `font-medium`.
+
+```js
+const PEls = document.querySelectorAll("p")
+const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$0"))
+const durationSpan = targetP.querySelector("span")
+
+assert.isTrue(durationSpan.classList.contains("font-medium"))
+```
+
+Your `span` element should have the class `text-gray-500`.
+
+```js
+const PEls = document.querySelectorAll("p")
+const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$0"))
+const durationSpan = targetP.querySelector("span")
+
+assert.isTrue(durationSpan.classList.contains("text-gray-500"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+--fcc-editable-region--
+            <p class="text-4xl font-bold text-gray-900">$0<span >/month</span></p>
+--fcc-editable-region--
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-supported streaming</li>
+              <li><span>&#10003;</span>Curated playlists</li>
+            </ul>
+          </div>
+          <a href="#">Start listening</a>
+        </div>
+        <div>
+          <div>Most Popular</div>
+          <div>
+            <h2>Premium</h2>
+            <p>$9.99<span>/month</span></p>
+            <p>
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+          </div>
+          <a href="#">Go Premium</a>
+        </div>
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864f704409f85463386cd91.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864f704409f85463386cd91.md
new file mode 100644
index 00000000000..711648a7e40
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864f704409f85463386cd91.md
@@ -0,0 +1,102 @@
+---
+id: 6864f704409f85463386cd91
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Moving to the next paragraph, give it the utility class `text-gray-600`.
+
+# --hints--
+
+Your `p` element should have the class `text-gray-600`.
+
+```js
+const PEls = document.querySelectorAll("p")
+const targetP = Array.from(PEls).find(p => p.textContent.trim() === "Start exploring millions of songs with basic features and ads.")
+
+assert.equal(targetP.className, "text-gray-600")
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
+            --fcc-editable-region--
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            --fcc-editable-region--
+            <ul>
+              <li><span>&#10003;</span>Ad-supported streaming</li>
+              <li><span>&#10003;</span>Curated playlists</li>
+            </ul>
+          </div>
+          <a href="#">Start listening</a>
+        </div>
+        <div>
+          <div>Most Popular</div>
+          <div>
+            <h2>Premium</h2>
+            <p>$9.99<span>/month</span></p>
+            <p>
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+          </div>
+          <a href="#">Go Premium</a>
+        </div>
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864f7985a9b7e5285e27257.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864f7985a9b7e5285e27257.md
new file mode 100644
index 00000000000..2df3b0d533d
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864f7985a9b7e5285e27257.md
@@ -0,0 +1,125 @@
+---
+id: 6864f7985a9b7e5285e27257
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Next, assign the utility classes `mt-6`, `space-y-2`, `text-sm`, and `text-gray-700` to the `ul`.
+
+# --hints--
+
+Your `ul` element should have the class `mt-6`.
+
+```js
+const firstUl = document.querySelector("ul")
+
+assert.isTrue(firstUl.classList.contains("mt-6"))
+```
+
+Your `ul` element should have the class `space-y-2`.
+
+```js
+const firstUl = document.querySelector("ul")
+
+assert.isTrue(firstUl.classList.contains("space-y-2"))
+```
+
+Your `ul` element should have the class `text-sm`.
+
+```js
+const firstUl = document.querySelector("ul")
+
+assert.isTrue(firstUl.classList.contains("text-sm"))
+```
+
+Your `ul` element should have the class `text-gray-700`.
+
+```js
+const firstUl = document.querySelector("ul")
+
+assert.isTrue(firstUl.classList.contains("text-gray-700"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
+            <p class="text-gray-600">
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            --fcc-editable-region--
+            <ul>
+              <li><span>&#10003;</span>Ad-supported streaming</li>
+              <li><span>&#10003;</span>Curated playlists</li>
+            </ul>
+            --fcc-editable-region--
+          </div>
+          <a href="#">Start listening</a>
+        </div>
+        <div>
+          <div>Most Popular</div>
+          <div>
+            <h2>Premium</h2>
+            <p>$9.99<span>/month</span></p>
+            <p>
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+          </div>
+          <a href="#">Go Premium</a>
+        </div>
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864f81018a0085ae30afa9b.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864f81018a0085ae30afa9b.md
new file mode 100644
index 00000000000..56c93760244
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864f81018a0085ae30afa9b.md
@@ -0,0 +1,128 @@
+---
+id: 6864f81018a0085ae30afa9b
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+The checkmark in each `span` at the start of a list item is decorative. Add `aria-hidden` to these `span` elements to hide them from screen readers.
+
+Also, assign the classes `text-green-700` and `mr-2` to each of the `span` elements.
+
+# --hints--
+
+Your two `span` elements should have the `aria-hidden` attribute.
+
+```js
+const spanEls = document.querySelectorAll("ul li span")
+const firstTwoSpans = [spanEls[0], spanEls[1]]
+
+firstTwoSpans.forEach(span => {
+  assert.isTrue(span.hasAttribute("aria-hidden"))
+})
+```
+
+Your two `span` elements should have the class `text-green-700`.
+
+```js
+const spanEls = document.querySelectorAll("ul li span")
+const firstTwoSpans = [spanEls[0], spanEls[1]]
+
+firstTwoSpans.forEach(span => {
+  assert.isTrue(span.classList.contains("text-green-700"))
+})
+```
+
+Your two `span` elements should have the class `mr-2`.
+
+```js
+const spanEls = document.querySelectorAll("ul li span")
+const firstTwoSpans = [spanEls[0], spanEls[1]]
+
+firstTwoSpans.forEach(span => {
+  assert.isTrue(span.classList.contains("mr-2"))
+})
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
+            <p class="text-gray-600">
+              Start exploring millions of songs with basic features and ads.
+            </p>
+--fcc-editable-region--
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li><span>&#10003;</span>Ad-supported streaming</li>
+              <li><span>&#10003;</span>Curated playlists</li>
+            </ul>
+--fcc-editable-region--
+          </div>
+          <a href="#">Start listening</a>
+        </div>
+        <div>
+          <div>Most Popular</div>
+          <div>
+            <h2>Premium</h2>
+            <p>$9.99<span>/month</span></p>
+            <p>
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+          </div>
+          <a href="#">Go Premium</a>
+        </div>
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864f8fef1584f68696e8e24.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864f8fef1584f68696e8e24.md
new file mode 100644
index 00000000000..bd02bfe4bcb
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864f8fef1584f68696e8e24.md
@@ -0,0 +1,155 @@
+---
+id: 6864f8fef1584f68696e8e24
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Now, you should move to the `Start listening` CTA to make it a proper button.
+
+Assign it the utility classes `bg-indigo-100`, `px-4`, `py-2`, `text-center`, `font-semibold`, `text-indigo-700`, and `hover:bg-indigo-200`.
+
+# --hints--
+
+Your anchor element should have the class `bg-indigo-100`.
+
+```js
+const firstATag = document.querySelector("a")
+
+assert.isTrue(firstATag.classList.contains("bg-indigo-100"))
+```
+
+Your anchor element should have the class `px-4`.
+
+```js
+const firstATag = document.querySelector("a")
+
+assert.isTrue(firstATag.classList.contains("px-4"))
+```
+
+Your anchor element should have the class `py-2`.
+
+```js
+const firstATag = document.querySelector("a")
+
+assert.isTrue(firstATag.classList.contains("py-2"))
+```
+
+Your anchor element should have the class `text-center`.
+
+```js
+const firstATag = document.querySelector("a")
+
+assert.isTrue(firstATag.classList.contains("text-center"))
+```
+
+Your anchor element should have the class `font-semibold`.
+
+```js
+const firstATag = document.querySelector("a")
+
+assert.isTrue(firstATag.classList.contains("font-semibold"))
+```
+
+Your anchor element should have the class `text-indigo-700`.
+
+```js
+const firstATag = document.querySelector("a")
+
+assert.isTrue(firstATag.classList.contains("text-indigo-700"))
+```
+
+Your anchor element should have the class `hover:bg-indigo-200`.
+
+```js
+const firstATag = document.querySelector("a")
+
+assert.isTrue(firstATag.classList.contains("hover:bg-indigo-200"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Ad-supported streaming
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Curated playlists
+              </li>
+            </ul>
+          </div>
+          --fcc-editable-region--
+          <a href="#">Start listening</a>
+          --fcc-editable-region--
+        </div>
+        <div>
+          <div>Most Popular</div>
+          <div>
+            <h2>Premium</h2>
+            <p>$9.99<span>/month</span></p>
+            <p>
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+          </div>
+          <a href="#">Go Premium</a>
+        </div>
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864fa68aae44b80f7d0863c.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864fa68aae44b80f7d0863c.md
new file mode 100644
index 00000000000..12275260982
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864fa68aae44b80f7d0863c.md
@@ -0,0 +1,118 @@
+---
+id: 6864fa68aae44b80f7d0863c
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+In addition to those, add the classes `block` and `rounded-md` to the anchor tag to make the it a block element and remove the sharp edges.
+
+# --hints--
+
+Your anchor element should have the class `block`.
+
+```js
+const firstATag = document.querySelector("a")
+
+assert.isTrue(firstATag.classList.contains("block"))
+```
+
+Your anchor element should have the class `rounded-md`.
+
+```js
+const firstATag = document.querySelector("a")
+
+assert.isTrue(firstATag.classList.contains("rounded-md"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Ad-supported streaming
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Curated playlists
+              </li>
+            </ul>
+          </div>
+          --fcc-editable-region--
+          <a
+            href="#"
+            class="bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
+          >
+            Start listening
+          </a>
+          --fcc-editable-region--
+        </div>
+        <div>
+          <div>Most Popular</div>
+          <div>
+            <h2>Premium</h2>
+            <p>$9.99<span>/month</span></p>
+            <p>
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+          </div>
+          <a href="#">Go Premium</a>
+        </div>
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864fb24b8070f904768c24f.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864fb24b8070f904768c24f.md
new file mode 100644
index 00000000000..7ed203cc5a8
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6864fb24b8070f904768c24f.md
@@ -0,0 +1,144 @@
+---
+id: 6864fb24b8070f904768c24f
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+The next pricing card is the **Premium Plan**.
+
+Give the wrapper `div` of the premium plan the classes `bg-gray-950`, `text-white`, `ring-2`, `ring-fuchsia-500`, and `p-8`.
+
+# --hints--
+
+Your wrapper `div` element for the premium plan should have the class `bg-gray-950`.
+
+```js
+const premiumPlanWrapper = document.querySelectorAll("div")[3]
+
+assert.isTrue(premiumPlanWrapper.classList.contains("bg-gray-950"))
+```
+
+Your wrapper `div` element for the premium plan should have the class `text-white`.
+
+```js
+const premiumPlanWrapper = document.querySelectorAll("div")[3]
+
+assert.isTrue(premiumPlanWrapper.classList.contains("text-white"))
+```
+
+Your wrapper `div` element for the premium plan should have the class `ring-2`.
+
+```js
+const premiumPlanWrapper = document.querySelectorAll("div")[3]
+
+assert.isTrue(premiumPlanWrapper.classList.contains("ring-2"))
+```
+
+Your wrapper `div` element for the premium plan should have the class `ring-fuchsia-500`.
+
+```js
+const premiumPlanWrapper = document.querySelectorAll("div")[3]
+
+assert.isTrue(premiumPlanWrapper.classList.contains("ring-fuchsia-500"))
+```
+
+Your wrapper `div` element for the premium plan should have the class `p-8`.
+
+```js
+const premiumPlanWrapper = document.querySelectorAll("div")[3]
+
+assert.isTrue(premiumPlanWrapper.classList.contains("p-8"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Ad-supported streaming
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Curated playlists
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
+          >
+            Start listening
+          </a>
+        </div>
+        --fcc-editable-region--
+        <div>
+          <div>Most Popular</div>
+          <div>
+            <h2>Premium</h2>
+            <p>$9.99<span>/month</span></p>
+            <p>
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+          </div>
+          <a href="#">Go Premium</a>
+        </div>
+        --fcc-editable-region--
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68667227c6b33aaf41d4e086.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68667227c6b33aaf41d4e086.md
new file mode 100644
index 00000000000..0be13d9ebc9
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68667227c6b33aaf41d4e086.md
@@ -0,0 +1,138 @@
+---
+id: 68667227c6b33aaf41d4e086
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+To position the items in the card, you need grid classes again. Assign the utility classes `grid`, `grid-rows-[1fr_auto]`, and `gap-6` to the wrapper `div`.
+
+Also, remove the sharp edges with the class `rounded-xl`.
+
+# --hints--
+
+Your wrapper `div` element for the premium plan should have the class `grid`.
+
+```js
+const premiumPlanWrapper = document.querySelectorAll("div")[3]
+
+assert.isTrue(premiumPlanWrapper.classList.contains("grid"))
+```
+
+Your wrapper `div` element for the premium plan should have the class `grid-rows-[1fr_auto]`.
+
+```js
+const premiumPlanWrapper = document.querySelectorAll("div")[3]
+
+assert.isTrue(premiumPlanWrapper.classList.contains("grid-rows-[1fr_auto]"))
+```
+
+Your wrapper `div` element for the premium plan should have the class `gap-6`.
+
+```js
+const premiumPlanWrapper = document.querySelectorAll("div")[3]
+
+assert.isTrue(premiumPlanWrapper.classList.contains("gap-6"))
+```
+
+Your wrapper `div` element for the premium plan should have the class `rounded-xl`.
+
+```js
+const premiumPlanWrapper = document.querySelectorAll("div")[3]
+
+assert.isTrue(premiumPlanWrapper.classList.contains("rounded-xl"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Ad-supported streaming
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Curated playlists
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
+          >
+            Start listening
+          </a>
+        </div>
+--fcc-editable-region--
+        <div class="bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8">
+          <div>Most Popular</div>
+          <div>
+            <h2>Premium</h2>
+            <p>$9.99<span>/month</span></p>
+            <p>
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+          </div>
+          <a href="#">Go Premium</a>
+        </div>
+--fcc-editable-region--
+        <div>
+          <div>
+            <div>
+              <h2>Family</h2>
+              <p>$14.99<span>/month</span></p>
+              <p>
+                Enjoy all of the features with a plan for up to 6 family members.
+              </p>
+              <ul>
+                <li>
+                  <span>&#10003;</span>All Premium features
+                </li>
+                <li>
+                  <span>&#10003;</span>Up to 6 accounts
+                </li>
+                <li>
+                  <span>&#10003;</span>Individual playlists &
+                  libraries
+                </li>
+                <li>
+                  <span>&#10003;</span>Family Mix playlists
+                </li>
+              </ul>
+            </div>
+            <a href="#">Start Family Plan</a>
+          </div>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6866733f0b8f85bcb9587646.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6866733f0b8f85bcb9587646.md
new file mode 100644
index 00000000000..7c4c17b394d
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6866733f0b8f85bcb9587646.md
@@ -0,0 +1,120 @@
+---
+id: 6866733f0b8f85bcb9587646
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+The premium pricing card should be the one that stands out the most on the page. Also, it's the only card that will have a `Most popular` badge. To make this card and its badge stand out, you can use Tailwind's relative positioning and scaling utility classes.
+
+Here's how you would make an element bigger with scaling in Tailwind CSS:
+
+```html
+<div class="transform scale-110">
+  This element is scaled up by 10%
+</div>
+```
+
+You will take care of the positioning in the coming steps. For now, assign the class `scale-105` to the wrapper `div` to make it a bit bigger than the other pricing cards.
+
+# --hints--
+
+Your wrapper `div` element for the premium plan should have the class `scale-105`.
+
+```js
+const premiumPlanWrapper = document.querySelectorAll("div")[3]
+
+assert.isTrue(premiumPlanWrapper.classList.contains("scale-105"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Ad-supported streaming
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Curated playlists
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
+          >
+            Start listening
+          </a>
+        </div>
+--fcc-editable-region--
+        <div class="bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl">
+          <div>Most Popular</div>
+          <div>
+            <h2>Premium</h2>
+            <p>$9.99<span>/month</span></p>
+            <p>
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+          </div>
+          <a href="#">Go Premium</a>
+        </div>
+--fcc-editable-region--
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6866740a0f532cc7e9e21877.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6866740a0f532cc7e9e21877.md
new file mode 100644
index 00000000000..8b9450ac36e
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6866740a0f532cc7e9e21877.md
@@ -0,0 +1,130 @@
+---
+id: 6866740a0f532cc7e9e21877
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Let's move onto the `Most popular` badge. You need to place it in the upper right corner of the card, so you can use some of Tailwind's positioning utility classes to do that.
+
+Here's how you would use CSS positioning in Tailwind:
+
+```html
+<div class="relative">
+  <div class="absolute top-0 left-0 bg-blue-200 p-2">
+    This element is positioned at the top-left corner
+  </div>
+</div>
+```
+
+Assign the class `relative` to the wrapper `div` and `absolute` to the `div` with the text `Most popular`.
+
+# --hints--
+
+Your wrapper `div` element for the premium plan should have the class `relative`.
+
+```js
+const premiumPlanWrapper = document.querySelectorAll("div")[3]
+
+assert.isTrue(premiumPlanWrapper.classList.contains("relative"))
+```
+
+Your `div` element with the text `Most popular` should have the class `absolute`.
+
+```js
+const badgeDiv = document.querySelectorAll("div")[4]
+
+assert.isTrue(badgeDiv.classList.contains("absolute"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Ad-supported streaming
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Curated playlists
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
+          >
+            Start listening
+          </a>
+        </div>
+--fcc-editable-region--
+        <div class=" bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
+          <div >Most Popular</div>
+          <div>
+            <h2>Premium</h2>
+            <p>$9.99<span>/month</span></p>
+            <p>
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+          </div>
+          <a href="#">Go Premium</a>
+        </div>
+--fcc-editable-region--
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6866771fa1b958f7560a6863.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6866771fa1b958f7560a6863.md
new file mode 100644
index 00000000000..97cd0b39372
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6866771fa1b958f7560a6863.md
@@ -0,0 +1,140 @@
+---
+id: 6866771fa1b958f7560a6863
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+That moves the badge text, but not exactly where you want. The magic is in the `right-[num]`, `left-[num]`, `top-[num]`, and `bottom-[num]` utility classes.
+
+Here's how to use them:
+
+```html
+<div class="relative h-48 bg-gray-100">
+  <div class="absolute top-4 left-8 bg-blue-300 p-2">
+    This element is positioned 1rem from top and 2rem from left
+  </div>
+</div>
+```
+
+You can also indicate negative values by prefixing them with a hyphen:
+
+```html
+<div class="relative h-48 bg-gray-100">
+  <div class="absolute -top-4 -left-8 bg-blue-300 p-2">
+    This element is positioned 1rem above and 2rem to the left
+  </div>
+</div>
+```
+
+Add the classes `-top-3` and `right-3` to the `Most popular` badge `div`.
+
+# --hints--
+
+Your `div` element with the text `Most popular` should have the class `-top-3`.
+
+```js
+const badgeDiv = document.querySelectorAll("div")[4]
+
+assert.isTrue(badgeDiv.classList.contains("-top-3"))
+```
+
+Your `div` element with the text `Most popular` should have the class `right-3`.
+
+```js
+const badgeDiv = document.querySelectorAll("div")[4]
+
+assert.isTrue(badgeDiv.classList.contains("right-3"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Ad-supported streaming
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Curated playlists
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
+          >
+            Start listening
+          </a>
+        </div>
+        <div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
+          --fcc-editable-region--
+          <div class="absolute">Most Popular</div>
+          --fcc-editable-region--
+          <div>
+            <h2>Premium</h2>
+            <p>$9.99<span>/month</span></p>
+            <p>
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+          </div>
+          <a href="#">Go Premium</a>
+        </div>
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/686678efc0d9e60eb59ca029.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/686678efc0d9e60eb59ca029.md
new file mode 100644
index 00000000000..0f6d472a5a7
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/686678efc0d9e60eb59ca029.md
@@ -0,0 +1,182 @@
+---
+id: 686678efc0d9e60eb59ca029
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+The badge can be better styled. For this, you will use some Tailwind gradient classes. Here's how you can use gradient styles in Tailwind:
+
+```html
+<div class="bg-gradient-to-r from-blue-500 to-green-500">
+  This is a badge
+</div>
+```
+
+Add the classes `bg-gradient-to-r`, `from-fuchsia-500`, and `to-indigo-500` to the badge `div`. Also, add `rounded-full`, `px-3`, `py-1`, `text-xs`, `font-bold`, and `text-white`.
+
+# --hints--
+
+Your `div` element with the text `Most popular` should have the class `bg-gradient-to-r`.
+
+```js
+const badgeDiv = document.querySelectorAll("div")[4]
+
+assert.isTrue(badgeDiv.classList.contains("bg-gradient-to-r"))
+```
+
+Your `div` element with the text `Most popular` should have the class `from-fuchsia-500`.
+
+```js
+const badgeDiv = document.querySelectorAll("div")[4]
+
+assert.isTrue(badgeDiv.classList.contains("from-fuchsia-500"))
+```
+
+Your `div` element with the text `Most popular` should have the class `to-indigo-500`.
+
+```js
+const badgeDiv = document.querySelectorAll("div")[4]
+
+assert.isTrue(badgeDiv.classList.contains("to-indigo-500"))
+```
+
+Your `div` element with the text `Most popular` should have the class `rounded-full`.
+
+```js
+const badgeDiv = document.querySelectorAll("div")[4]
+
+assert.isTrue(badgeDiv.classList.contains("rounded-full"))
+```
+
+Your `div` element with the text `Most popular` should have the class `px-3`.
+
+```js
+const badgeDiv = document.querySelectorAll("div")[4]
+
+assert.isTrue(badgeDiv.classList.contains("px-3"))
+```
+
+Your `div` element with the text `Most popular` should have the class `py-1`.
+
+```js
+const badgeDiv = document.querySelectorAll("div")[4]
+
+assert.isTrue(badgeDiv.classList.contains("py-1"))
+```
+
+Your `div` element with the text `Most popular` should have the class `text-xs`.
+
+```js
+const badgeDiv = document.querySelectorAll("div")[4]
+
+assert.isTrue(badgeDiv.classList.contains("text-xs"))
+```
+
+Your `div` element with the text `Most popular` should have the class `font-bold`.
+
+```js
+const badgeDiv = document.querySelectorAll("div")[4]
+
+assert.isTrue(badgeDiv.classList.contains("font-bold"))
+```
+
+Your `div` element with the text `Most popular` should have the class `text-white`.
+
+```js
+const badgeDiv = document.querySelectorAll("div")[4]
+
+assert.isTrue(badgeDiv.classList.contains("text-white"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 and mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Ad-supported streaming
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Curated playlists
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
+          >
+            Start listening
+          </a>
+        </div>
+        <div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
+          --fcc-editable-region--
+          <div class="absolute -top-3 right-3">Most Popular</div>
+          --fcc-editable-region--
+          <div>
+            <h2>Premium</h2>
+            <p>$9.99<span>/month</span></p>
+            <p>
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+          </div>
+          <a href="#">Go Premium</a>
+        </div>
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68667a42c6784620c088505c.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68667a42c6784620c088505c.md
new file mode 100644
index 00000000000..c77c0e2568a
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68667a42c6784620c088505c.md
@@ -0,0 +1,128 @@
+---
+id: 68667a42c6784620c088505c
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Apart from the `Go Premium` CTA, the rest of the content is in a `div`. That makes CSS grid a good option to arrange everything.
+
+Add the classes `grid`, `grid-rows-[auto_auto_auto_1fr]`, and `gap-y-2` to the `div` that wraps the `h2`, `p`, and `ul` elements.
+
+# --hints--
+
+Your `div` element that wraps the `h2`, `p`, and `ul` elements should have the class `grid`.
+
+```js
+const innerWrapperDiv = document.querySelectorAll("div")[5]
+
+assert.isTrue(innerWrapperDiv.classList.contains("grid"))
+```
+
+Your `div` element that wraps the `h2`, `p`, and `ul` elements should have the class `grid-rows-[auto_auto_auto_1fr]`.
+
+```js
+const innerWrapperDiv = document.querySelectorAll("div")[5]
+
+assert.isTrue(innerWrapperDiv.classList.contains("grid-rows-[auto_auto_auto_1fr]"))
+```
+
+Your `div` element that wraps the `h2`, `p`, and `ul` elements should have the class `gap-y-2`.
+
+```js
+const innerWrapperDiv = document.querySelectorAll("div")[5]
+
+assert.isTrue(innerWrapperDiv.classList.contains("gap-y-2"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Ad-supported streaming
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Curated playlists
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
+          >
+            Start listening
+          </a>
+        </div>
+        <div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
+          <div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
+          --fcc-editable-region--
+          <div>
+            <h2>Premium</h2>
+            <p>$9.99<span>/month</span></p>
+            <p>
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+          </div>
+          --fcc-editable-region--
+          <a href="#">Go Premium</a>
+        </div>
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68667b354cdc432f3f83c846.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68667b354cdc432f3f83c846.md
new file mode 100644
index 00000000000..3b81c40544e
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68667b354cdc432f3f83c846.md
@@ -0,0 +1,129 @@
+---
+id: 68667b354cdc432f3f83c846
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Add the classes `text-lg`, `font-semibold`, and `text-fuchsia-200` to the `h2` element of the premium plan.
+
+# --hints--
+
+Your `h2` element should have the class `text-lg`.
+
+```js
+const h2Els = document.querySelectorAll("h2")
+const premiumH2 = Array.from(h2Els).find(h2 => h2.textContent === "Premium")
+
+assert.isTrue(premiumH2.classList.contains("text-lg"))
+```
+
+Your `h2` element should have the class `font-semibold`.
+
+```js
+const h2Els = document.querySelectorAll("h2")
+const premiumH2 = Array.from(h2Els).find(h2 => h2.textContent === "Premium")
+
+assert.isTrue(premiumH2.classList.contains("font-semibold"))
+```
+
+Your `h2` element should have the class `text-fuchsia-200`.
+
+```js
+const h2Els = document.querySelectorAll("h2")
+const premiumH2 = Array.from(h2Els).find(h2 => h2.textContent === "Premium")
+
+assert.isTrue(premiumH2.classList.contains("text-fuchsia-200"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Ad-supported streaming
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Curated playlists
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
+          >
+            Start listening
+          </a>
+        </div>
+        <div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
+          <div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            --fcc-editable-region--
+            <h2>Premium</h2>
+            --fcc-editable-region--
+            <p>$9.99<span>/month</span></p>
+            <p>
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+          </div>
+          <a href="#">Go Premium</a>
+        </div>
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68667bdd7e26613a6d013ac4.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68667bdd7e26613a6d013ac4.md
new file mode 100644
index 00000000000..97c5b7cae3e
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68667bdd7e26613a6d013ac4.md
@@ -0,0 +1,129 @@
+---
+id: 68667bdd7e26613a6d013ac4
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Add the classes `text-4xl`, `font-bold`, and `text-white` to the `p` element that has the price text to make it look more visible.
+
+# --hints--
+
+Your `p` element should have the class `text-4xl`.
+
+```js
+const PEls = document.querySelectorAll("p")
+const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$9.99"))
+
+assert.isTrue(targetP.classList.contains("text-4xl"))
+```
+
+Your `p` element should have the class `font-bold`.
+
+```js
+const PEls = document.querySelectorAll("p")
+const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$9.99"))
+
+assert.isTrue(targetP.classList.contains("font-bold"))
+```
+
+Your `p` element should have the class `text-white`.
+
+```js
+const PEls = document.querySelectorAll("p")
+const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$9.99"))
+
+assert.isTrue(targetP.classList.contains("text-white"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Ad-supported streaming
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Curated playlists
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
+          >
+            Start listening
+          </a>
+        </div>
+        <div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
+          <div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
+            --fcc-editable-region--
+            <p>$9.99<span>/month</span></p>
+            --fcc-editable-region--
+            <p>
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+          </div>
+          <a href="#">Go Premium</a>
+        </div>
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68667c33e3c13940ce87c40d.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68667c33e3c13940ce87c40d.md
new file mode 100644
index 00000000000..54adf6d9794
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68667c33e3c13940ce87c40d.md
@@ -0,0 +1,132 @@
+---
+id: 68667c33e3c13940ce87c40d
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+The `span` that has the duration also needs some styling, so add the classes `text-base`, `font-medium`, and `text-fuchsia-300` to it.
+
+# --hints--
+
+Your `span` element should have the class `text-base`.
+
+```js
+const PEls = document.querySelectorAll("p")
+const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$9.99"))
+const durationSpan = targetP.querySelector("span")
+
+assert.isTrue(durationSpan.classList.contains("text-base"))
+```
+
+Your `span` element should have the class `font-medium`.
+
+```js
+const PEls = document.querySelectorAll("p")
+const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$9.99"))
+const durationSpan = targetP.querySelector("span")
+
+assert.isTrue(durationSpan.classList.contains("font-medium"))
+```
+
+Your `span` element should have the class `text-fuchsia-300`.
+
+```js
+const PEls = document.querySelectorAll("p")
+const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$9.99"))
+const durationSpan = targetP.querySelector("span")
+
+assert.isTrue(durationSpan.classList.contains("text-fuchsia-300"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Ad-supported streaming
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Curated playlists
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
+          >
+            Start listening
+          </a>
+        </div>
+        <div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
+          <div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
+            --fcc-editable-region--
+            <p class="text-4xl font-bold text-white">$9.99<span>/month</span></p>
+            --fcc-editable-region--
+            <p>
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+          </div>
+          <a href="#">Go Premium</a>
+        </div>
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68667c8eca7580479ead76a0.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68667c8eca7580479ead76a0.md
new file mode 100644
index 00000000000..b464050fbfe
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68667c8eca7580479ead76a0.md
@@ -0,0 +1,111 @@
+---
+id: 68667c8eca7580479ead76a0
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Add the class `text-gray-300` to the `p` element that has the one-line benefit of the plan.
+
+# --hints--
+
+Your `p` element should have the class `text-gray-300`.
+
+```js
+const targetP = document.querySelectorAll("p")[3]
+
+assert.equal(targetP.className, "text-gray-300")
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Ad-supported streaming
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Curated playlists
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
+          >
+            Start listening
+          </a>
+        </div>
+        <div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
+          <div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
+            <p class="text-4xl font-bold text-white">$9.99<span class="text-base font-medium text-fuchsia-300">/month</span>
+            </p>
+            --fcc-editable-region--
+            <p>
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            --fcc-editable-region--
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+          </div>
+          <a href="#">Go Premium</a>
+        </div>
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68667cefaa5ad54e5ec212a4.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68667cefaa5ad54e5ec212a4.md
new file mode 100644
index 00000000000..154c2c28590
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68667cefaa5ad54e5ec212a4.md
@@ -0,0 +1,136 @@
+---
+id: 68667cefaa5ad54e5ec212a4
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+Moving to the list element, add the classes `mt-6`, `space-y-2`, `text-sm`, and `text-fuchsia-100` to the `ul` to space out the list items and make them look more appealing.
+
+# --hints--
+
+Your `ul` element should have the class `mt-6`.
+
+```js
+const secondUl = document.querySelectorAll("ul")[1]
+
+assert.isTrue(secondUl.classList.contains("mt-6"))
+```
+
+Your `ul` element should have the class `space-y-2`.
+
+```js
+const secondUl = document.querySelectorAll("ul")[1]
+
+assert.isTrue(secondUl.classList.contains("space-y-2"))
+```
+
+Your `ul` element should have the class `text-sm`.
+
+```js
+const secondUl = document.querySelectorAll("ul")[1]
+
+assert.isTrue(secondUl.classList.contains("text-sm"))
+```
+
+Your `ul` element should have the class `text-fuchsia-100`.
+
+```js
+const secondUl = document.querySelectorAll("ul")[1]
+
+assert.isTrue(secondUl.classList.contains("text-fuchsia-100"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Ad-supported streaming
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Curated playlists
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
+          >
+            Start listening
+          </a>
+        </div>
+        <div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
+          <div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
+            <p class="text-4xl font-bold text-white">
+              $9.99<span class="text-base font-medium text-fuchsia-300">/month</span>
+            </p>
+            <p class="text-gray-300">
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            --fcc-editable-region--
+            <ul>
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+            --fcc-editable-region--
+          </div>
+          <a href="#">Go Premium</a>
+        </div>
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68667da4251a7c59e083bb7e.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68667da4251a7c59e083bb7e.md
new file mode 100644
index 00000000000..3adf0253f9d
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68667da4251a7c59e083bb7e.md
@@ -0,0 +1,139 @@
+---
+id: 68667da4251a7c59e083bb7e
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+For the `span` elements inside each list item, assign them the classes `text-green-500` and `mr-2` to make the markers green and push them a bit away from the text.
+
+Also, assign them the `aria-hidden` attribute like you did for the `span` elements of the first pricing plan.
+
+# --hints--
+
+Your `span` elements should have the class `text-green-500`.
+
+```js
+const spanEls = document.querySelectorAll("ul li span")
+const premiumSpans = [spanEls[2], spanEls[3], spanEls[4]]
+
+premiumSpans.forEach(span => {
+  assert.isTrue(span.classList.contains("text-green-500"))
+})
+```
+
+Your `span` elements should have the class `mr-2`.
+
+```js
+const spanEls = document.querySelectorAll("ul li span")
+const premiumSpans = [spanEls[2], spanEls[3], spanEls[4]]
+
+premiumSpans.forEach(span => {
+  assert.isTrue(span.classList.contains("mr-2"))
+})
+```
+
+Your `span` elements should have the `aria-hidden` attribute.
+
+```js
+const spanEls = document.querySelectorAll("ul li span")
+const premiumSpans = [spanEls[2], spanEls[3], spanEls[4]]
+
+premiumSpans.forEach(span => {
+  assert.isTrue(span.hasAttribute("aria-hidden"))
+})
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Ad-supported streaming
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Curated playlists
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
+          >
+            Start listening
+          </a>
+        </div>
+        <div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
+          <div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
+            <p class="text-4xl font-bold text-white">
+              $9.99<span class="text-base font-medium text-fuchsia-300">/month</span>
+            </p>
+            <p class="text-gray-300">
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            --fcc-editable-region--
+            <ul class="mt-6 space-y-2 text-sm text-fuchsia-100">
+              <li><span>&#10003;</span>Ad-free listening</li>
+              <li><span>&#10003;</span>Offline playback</li>
+              <li><span>&#10003;</span>Unlimited skips</li>
+            </ul>
+            --fcc-editable-region--
+          </div>
+          <a href="#">Go Premium</a>
+        </div>
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68667e17e51bbf62bc6e1737.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68667e17e51bbf62bc6e1737.md
new file mode 100644
index 00000000000..1785afeea58
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68667e17e51bbf62bc6e1737.md
@@ -0,0 +1,176 @@
+---
+id: 68667e17e51bbf62bc6e1737
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Now you should style the CTA to make it look more like a button.
+
+For the background and foreground colors, assign it the classes `bg-gradient-to-r`, `from-fuchsia-500`, `to-indigo-600`, `text-white`, `hover:from-fuchsia-600`, and `hover:to-indigo-700`. Also assign it the classes `rounded-md` and `block`.
+
+# --hints--
+
+Your anchor element should have the class `bg-gradient-to-r`.
+
+```js
+const premiumATag = document.querySelectorAll("a")[1]
+
+assert.isTrue(premiumATag.classList.contains("bg-gradient-to-r"))
+```
+
+Your anchor element should have the class `from-fuchsia-500`.
+
+```js
+const premiumATag = document.querySelectorAll("a")[1]
+
+assert.isTrue(premiumATag.classList.contains("from-fuchsia-500"))
+```
+
+Your anchor element should have the class `to-indigo-600`.
+
+```js
+const premiumATag = document.querySelectorAll("a")[1]
+
+assert.isTrue(premiumATag.classList.contains("to-indigo-600"))
+```
+
+Your anchor element should have the class `text-white`.
+
+```js
+const premiumATag = document.querySelectorAll("a")[1]
+
+assert.isTrue(premiumATag.classList.contains("text-white"))
+```
+
+Your anchor element should have the class `hover:from-fuchsia-600`.
+
+```js
+const premiumATag = document.querySelectorAll("a")[1]
+
+assert.isTrue(premiumATag.classList.contains("hover:from-fuchsia-600"))
+```
+
+Your anchor element should have the class `hover:to-indigo-700`.
+
+```js
+const premiumATag = document.querySelectorAll("a")[1]
+
+assert.isTrue(premiumATag.classList.contains("hover:to-indigo-700"))
+```
+
+Your anchor element should have the class `rounded-md`.
+
+```js
+const premiumATag = document.querySelectorAll("a")[1]
+
+assert.isTrue(premiumATag.classList.contains("rounded-md"))
+```
+
+Your anchor element should have the class `block`.
+
+```js
+const premiumATag = document.querySelectorAll("a")[1]
+
+assert.isTrue(premiumATag.classList.contains("block"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Ad-supported streaming
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Curated playlists
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
+          >
+            Start listening
+          </a>
+        </div>
+        <div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
+          <div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
+            <p class="text-4xl font-bold text-white">
+              $9.99<span class="text-base font-medium text-fuchsia-300">/month</span>
+            </p>
+            <p class="text-gray-300">
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-fuchsia-100">
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Ad-free listening
+              </li>
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Offline playback
+              </li>
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Unlimited skips
+              </li>
+            </ul>
+          </div>
+          --fcc-editable-region--
+          <a href="#">Go Premium</a>
+          --fcc-editable-region--
+        </div>
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68667f8aa360b17a01982b7c.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68667f8aa360b17a01982b7c.md
new file mode 100644
index 00000000000..fbe23c1c935
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68667f8aa360b17a01982b7c.md
@@ -0,0 +1,139 @@
+---
+id: 68667f8aa360b17a01982b7c
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Now, add the classes `px-4`, `py-2`, `text-center`, and `font-semibold` to the anchor element.
+
+# --hints--
+
+Your anchor element should have the class `px-4`.
+
+```js
+const premiumATag = document.querySelectorAll("a")[1]
+
+assert.isTrue(premiumATag.classList.contains("px-4"))
+```
+
+Your anchor element should have the class `py-2`.
+
+```js
+const premiumATag = document.querySelectorAll("a")[1]
+
+assert.isTrue(premiumATag.classList.contains("py-2"))
+```
+
+Your anchor element should have the class `font-semibold`.
+
+```js
+const premiumATag = document.querySelectorAll("a")[1]
+
+assert.isTrue(premiumATag.classList.contains("font-semibold"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Ad-supported streaming
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Curated playlists
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
+          >
+            Start listening
+          </a>
+        </div>
+        <div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
+          <div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
+            <p class="text-4xl font-bold text-white">
+              $9.99<span class="text-base font-medium text-fuchsia-300">/month</span>
+            </p>
+            <p class="text-gray-300">
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-fuchsia-100">
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Ad-free listening
+              </li>
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Offline playback
+              </li>
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Unlimited skips
+              </li>
+            </ul>
+          </div>
+--fcc-editable-region--
+          <a
+            href="#"
+            class="block rounded-md bg-gradient-to-r from-fuchsia-500 to-indigo-600 text-white hover:from-fuchsia-600 hover:to-indigo-700"
+          >
+            Go Premium
+          </a>
+--fcc-editable-region--
+        </div>
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68668014d6a84384018dc302.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68668014d6a84384018dc302.md
new file mode 100644
index 00000000000..661c55e5594
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68668014d6a84384018dc302.md
@@ -0,0 +1,157 @@
+---
+id: 68668014d6a84384018dc302
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Next is the last pricing item, the **Family Plan**.
+
+To begin, give the wrapper `div` for the plan the classes `bg-gray-100`, `ring-1`, `ring-gray-300`, `p-8`, and `rounded-xl`.
+
+# --hints--
+
+Your wrapper `div` element for the family plan should have the class `bg-gray-100`.
+
+```js
+const familyPlanWrapper = document.querySelectorAll("div")[6]
+
+assert.isTrue(familyPlanWrapper.classList.contains("bg-gray-100"))
+```
+
+Your wrapper `div` element for the family plan should have the class `ring-1`.
+
+```js
+const familyPlanWrapper = document.querySelectorAll("div")[6]
+
+assert.isTrue(familyPlanWrapper.classList.contains("ring-1"))
+```
+
+Your wrapper `div` element for the family plan should have the class `ring-gray-300`.
+
+```js
+const familyPlanWrapper = document.querySelectorAll("div")[6]
+
+assert.isTrue(familyPlanWrapper.classList.contains("ring-gray-300"))
+```
+
+Your wrapper `div` element for the family plan should have the class `p-8`.
+
+```js
+const familyPlanWrapper = document.querySelectorAll("div")[6]
+
+assert.isTrue(familyPlanWrapper.classList.contains("p-8"))
+```
+
+Your wrapper `div` element for the family plan should have the class `rounded-xl`.
+
+```js
+const familyPlanWrapper = document.querySelectorAll("div")[6]
+
+assert.isTrue(familyPlanWrapper.classList.contains("rounded-xl"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Ad-supported streaming
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Curated playlists
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
+          >
+            Start listening
+          </a>
+        </div>
+        <div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
+          <div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
+            <p class="text-4xl font-bold text-white">
+              $9.99<span class="text-base font-medium text-fuchsia-300">/month</span>
+            </p>
+            <p class="text-gray-300">
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-fuchsia-100">
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Ad-free listening
+              </li>
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Offline playback
+              </li>
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Unlimited skips
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-gradient-to-r from-fuchsia-500 to-indigo-600 text-white hover:from-fuchsia-600 hover:to-indigo-700 px-4 py-2 text-center font-semibold"
+          >
+            Go Premium
+          </a>
+        </div>
+--fcc-editable-region--
+        <div>
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+--fcc-editable-region--
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6867c7b1f41ee104cf4aaa16.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6867c7b1f41ee104cf4aaa16.md
new file mode 100644
index 00000000000..3126f12de9a
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6867c7b1f41ee104cf4aaa16.md
@@ -0,0 +1,141 @@
+---
+id: 6867c7b1f41ee104cf4aaa16
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+Now, you will use `grid` to arrange the items inside the wrapper `div`.
+
+Add the classes `grid`, `grid-rows-[1fr_auto]`, and `gap-6` to the wrapper `div`.
+
+# --hints--
+
+Your wrapper `div` element for the family plan should have the class `grid`.
+
+```js
+const familyPlanWrapper = document.querySelectorAll("div")[6]
+
+assert.isTrue(familyPlanWrapper.classList.contains("grid"))
+```
+
+Your wrapper `div` element for the family plan should have the class `grid-rows-[1fr_auto]`.
+
+```js
+const familyPlanWrapper = document.querySelectorAll("div")[6]
+
+assert.isTrue(familyPlanWrapper.classList.contains("grid-rows-[1fr_auto]"))
+```
+
+Your wrapper `div` element for the family plan should have the class `gap-6`.
+
+```js
+const familyPlanWrapper = document.querySelectorAll("div")[6]
+
+assert.isTrue(familyPlanWrapper.classList.contains("gap-6"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Ad-supported streaming
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Curated playlists
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
+          >
+            Start listening
+          </a>
+        </div>
+        <div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
+          <div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
+            <p class="text-4xl font-bold text-white">
+              $9.99<span class="text-base font-medium text-fuchsia-300">/month</span>
+            </p>
+            <p class="text-gray-300">
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-fuchsia-100">
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Ad-free listening
+              </li>
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Offline playback
+              </li>
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Unlimited skips
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-gradient-to-r from-fuchsia-500 to-indigo-600 text-white hover:from-fuchsia-600 hover:to-indigo-700 px-4 py-2 text-center font-semibold"
+          >
+            Go Premium
+          </a>
+        </div>
+--fcc-editable-region--
+        <div class="bg-gray-100 ring-1 ring-gray-300 p-8 rounded-xl ">
+          <div>
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+--fcc-editable-region--
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6867c8a8185485144ebbb453.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6867c8a8185485144ebbb453.md
new file mode 100644
index 00000000000..e04f9e09008
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6867c8a8185485144ebbb453.md
@@ -0,0 +1,141 @@
+---
+id: 6867c8a8185485144ebbb453
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+That takes care of some basic styling spacing for the item card, including the CTA button. For the rest of the inner content, you need to arrange everything in a grid by targeting the inner `div`.
+
+Assign the classes `grid`, `grid-rows-[auto_auto_auto_1fr]`, and `gap-y-2` to the inner `div`.
+
+# --hints--
+
+Your inner `div` element for the family plan should have the class `grid`.
+
+```js
+const familyPlanInnerDiv = document.querySelectorAll("div")[7]
+
+assert.isTrue(familyPlanInnerDiv.classList.contains("grid"))
+```
+
+Your inner `div` element for the family plan should have the class `grid-rows-[auto_auto_auto_1fr]`.
+
+```js
+const familyPlanInnerDiv = document.querySelectorAll("div")[7]
+
+assert.isTrue(familyPlanInnerDiv.classList.contains("grid-rows-[auto_auto_auto_1fr]"))
+```
+
+Your inner `div` element for the family plan should have the class `gap-y-2`.
+
+```js
+const familyPlanInnerDiv = document.querySelectorAll("div")[7]
+
+assert.isTrue(familyPlanInnerDiv.classList.contains("gap-y-2"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Ad-supported streaming
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Curated playlists
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
+          >
+            Start listening
+          </a>
+        </div>
+        <div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
+          <div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
+            <p class="text-4xl font-bold text-white">
+              $9.99<span class="text-base font-medium text-fuchsia-300">/month</span>
+            </p>
+            <p class="text-gray-300">
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-fuchsia-100">
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Ad-free listening
+              </li>
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Offline playback
+              </li>
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Unlimited skips
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-gradient-to-r from-fuchsia-500 to-indigo-600 text-white hover:from-fuchsia-600 hover:to-indigo-700 px-4 py-2 text-center font-semibold"
+          >
+            Go Premium
+          </a>
+        </div>
+        <div class="bg-gray-100 ring-1 ring-gray-300 p-8 rounded-xl grid grid-rows-[1fr_auto] gap-6">
+        --fcc-editable-region--
+          <div >
+            <h2>Family</h2>
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+        --fcc-editable-region--
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6867c93aefc7751d197d1187.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6867c93aefc7751d197d1187.md
new file mode 100644
index 00000000000..f2c0688c628
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6867c93aefc7751d197d1187.md
@@ -0,0 +1,142 @@
+---
+id: 6867c93aefc7751d197d1187
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Now, target the `h2` of the plan and assign to it the classes `text-lg`, `font-semibold`, and `text-indigo-600`.
+
+# --hints--
+
+Your `h2` element should have the class `text-lg`.
+
+```js
+const h2Els = document.querySelectorAll("h2")
+const familyH2 = Array.from(h2Els).find(h2 => h2.textContent === "Family")
+
+assert.isTrue(familyH2.classList.contains("text-lg"))
+```
+
+Your `h2` element should have the class `font-semibold`.
+
+```js
+const h2Els = document.querySelectorAll("h2")
+const familyH2 = Array.from(h2Els).find(h2 => h2.textContent === "Family")
+
+assert.isTrue(familyH2.classList.contains("font-semibold"))
+```
+
+Your `h2` element should have the class `text-indigo-600`.
+
+```js
+const h2Els = document.querySelectorAll("h2")
+const familyH2 = Array.from(h2Els).find(h2 => h2.textContent === "Family")
+
+assert.isTrue(familyH2.classList.contains("text-indigo-600"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Ad-supported streaming
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Curated playlists
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
+          >
+            Start listening
+          </a>
+        </div>
+        <div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
+          <div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
+            <p class="text-4xl font-bold text-white">
+              $9.99<span class="text-base font-medium text-fuchsia-300">/month</span>
+            </p>
+            <p class="text-gray-300">
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-fuchsia-100">
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Ad-free listening
+              </li>
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Offline playback
+              </li>
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Unlimited skips
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-gradient-to-r from-fuchsia-500 to-indigo-600 text-white hover:from-fuchsia-600 hover:to-indigo-700 px-4 py-2 text-center font-semibold"
+          >
+            Go Premium
+          </a>
+        </div>
+        <div class="bg-gray-100 ring-1 ring-gray-300 p-8 rounded-xl grid grid-rows-[1fr_auto] gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            --fcc-editable-region--
+            <h2 >Family</h2>
+            --fcc-editable-region--
+            <p>$14.99<span>/month</span></p>
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6867c9fd16b48f2abe22bdaa.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6867c9fd16b48f2abe22bdaa.md
new file mode 100644
index 00000000000..5c29e129b7c
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6867c9fd16b48f2abe22bdaa.md
@@ -0,0 +1,142 @@
+---
+id: 6867c9fd16b48f2abe22bdaa
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+The next item to style is the price text, including the `span` in it. Give the `p` element of the price the classes `text-4xl`, `font-bold`, and `text-gray-900`.
+
+# --hints--
+
+Your `p` element should have the class `text-4xl`.
+
+```js
+const PEls = document.querySelectorAll("p")
+const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$14.99"))
+
+assert.isTrue(targetP.classList.contains("text-4xl"))
+```
+
+Your `p` element should have the class `font-bold`.
+
+```js
+const PEls = document.querySelectorAll("p")
+const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$14.99"))
+
+assert.isTrue(targetP.classList.contains("font-bold"))
+```
+
+Your `p` element should have the class `text-gray-900`.
+
+```js
+const PEls = document.querySelectorAll("p")
+const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$14.99"))
+
+assert.isTrue(targetP.classList.contains("text-gray-900"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Ad-supported streaming
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Curated playlists
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
+          >
+            Start listening
+          </a>
+        </div>
+        <div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
+          <div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
+            <p class="text-4xl font-bold text-white">
+              $9.99<span class="text-base font-medium text-fuchsia-300">/month</span>
+            </p>
+            <p class="text-gray-300">
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-fuchsia-100">
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Ad-free listening
+              </li>
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Offline playback
+              </li>
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Unlimited skips
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-gradient-to-r from-fuchsia-500 to-indigo-600 text-white hover:from-fuchsia-600 hover:to-indigo-700 px-4 py-2 text-center font-semibold"
+          >
+            Go Premium
+          </a>
+        </div>
+        <div class="bg-gray-100 ring-1 ring-gray-300 p-8 rounded-xl grid grid-rows-[1fr_auto] gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Family</h2>
+--fcc-editable-region--
+            <p >$14.99<span>/month</span></p>
+--fcc-editable-region--
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6867caa0dbbeb93570ec0069.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6867caa0dbbeb93570ec0069.md
new file mode 100644
index 00000000000..74186b59702
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6867caa0dbbeb93570ec0069.md
@@ -0,0 +1,125 @@
+---
+id: 6867caa0dbbeb93570ec0069
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Assign the class `text-gray-600` to the paragraph under the price text.
+
+# --hints--
+
+Your `p` element should have the class `text-gray-600`.
+
+```js
+const PEls = document.querySelectorAll("p")
+const targetP = Array.from(PEls).find(p => p.textContent.trim() === "Enjoy all of the features with a plan for up to 6 family members.")
+
+assert.equal(targetP.className, "text-gray-600")
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Ad-supported streaming
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Curated playlists
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
+          >
+            Start listening
+          </a>
+        </div>
+        <div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
+          <div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
+            <p class="text-4xl font-bold text-white">
+              $9.99<span class="text-base font-medium text-fuchsia-300">/month</span>
+            </p>
+            <p class="text-gray-300">
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-fuchsia-100">
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Ad-free listening
+              </li>
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Offline playback
+              </li>
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Unlimited skips
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-gradient-to-r from-fuchsia-500 to-indigo-600 text-white hover:from-fuchsia-600 hover:to-indigo-700 px-4 py-2 text-center font-semibold"
+          >
+            Go Premium
+          </a>
+        </div>
+        <div class="bg-gray-100 ring-1 ring-gray-300 p-8 rounded-xl grid grid-rows-[1fr_auto] gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Family</h2>
+            <p class="text-4xl font-bold text-gray-900">$14.99<span class="text-base font-medium text-gray-500">/month</span>
+            </p>
+--fcc-editable-region--
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+--fcc-editable-region--
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6867cb70e797d142df4b88e5.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6867cb70e797d142df4b88e5.md
new file mode 100644
index 00000000000..b375ec5044d
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6867cb70e797d142df4b88e5.md
@@ -0,0 +1,149 @@
+---
+id: 6867cb70e797d142df4b88e5
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Next, assign the classes `mt-6`, `space-y-2`, `text-sm`, and `text-gray-700` to the `ul` element.
+
+# --hints--
+
+Your `ul` element should have the class `mt-6`.
+
+```js
+const thirdUl = document.querySelectorAll("ul")[2]
+
+assert.isTrue(thirdUl.classList.contains("mt-6"))
+```
+
+Your `ul` element should have the class `space-y-2`.
+
+```js
+const thirdUl = document.querySelectorAll("ul")[2]
+
+assert.isTrue(thirdUl.classList.contains("space-y-2"))
+```
+
+Your `ul` element should have the class `text-sm`.
+
+```js
+const thirdUl = document.querySelectorAll("ul")[2]
+
+assert.isTrue(thirdUl.classList.contains("text-sm"))
+```
+
+Your `ul` element should have the class `text-gray-700`.
+
+```js
+const thirdUl = document.querySelectorAll("ul")[2]
+
+assert.isTrue(thirdUl.classList.contains("text-gray-700"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Ad-supported streaming
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Curated playlists
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
+          >
+            Start listening
+          </a>
+        </div>
+        <div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
+          <div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
+            <p class="text-4xl font-bold text-white">
+              $9.99<span class="text-base font-medium text-fuchsia-300">/month</span>
+            </p>
+            <p class="text-gray-300">
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-fuchsia-100">
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Ad-free listening
+              </li>
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Offline playback
+              </li>
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Unlimited skips
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-gradient-to-r from-fuchsia-500 to-indigo-600 text-white hover:from-fuchsia-600 hover:to-indigo-700 px-4 py-2 text-center font-semibold"
+          >
+            Go Premium
+          </a>
+        </div>
+        <div class="bg-gray-100 ring-1 ring-gray-300 p-8 rounded-xl grid grid-rows-[1fr_auto] gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Family</h2>
+            <p class="text-4xl font-bold text-gray-900">
+              $14.99<span class="text-base font-medium text-gray-500">/month</span>
+            </p>
+            <p class="text-gray-600">
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+--fcc-editable-region--
+            <ul >
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+--fcc-editable-region--
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6867cbfbbb4a9f4bc73b01e6.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6867cbfbbb4a9f4bc73b01e6.md
new file mode 100644
index 00000000000..98b38c93ac8
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6867cbfbbb4a9f4bc73b01e6.md
@@ -0,0 +1,152 @@
+---
+id: 6867cbfbbb4a9f4bc73b01e6
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+The markers of the list items need to be spaced out a bit. So, give each `span` in the list items the classes `text-green-700` and `mr-2`.
+
+Also, add the `aria-hidden` attribute to each of the `span` elements.
+
+# --hints--
+
+Your `span` elements should have the class `text-green-700`.
+
+```js
+const spanEls = document.querySelectorAll("ul li span")
+const familyPlanSpans = [spanEls[5], spanEls[6], spanEls[7], spanEls[8]]
+
+familyPlanSpans.forEach(span => {
+  assert.isTrue(span.classList.contains("text-green-700"))
+})
+```
+
+Your `span` elements should have the class `mr-2`.
+
+```js
+const spanEls = document.querySelectorAll("ul li span")
+const familyPlanSpans = [spanEls[5], spanEls[6], spanEls[7], spanEls[8]]
+
+familyPlanSpans.forEach(span => {
+  assert.isTrue(span.classList.contains("mr-2"))
+})
+```
+
+Your `span` elements should have the `aria-hidden` attribute.
+
+```js
+const spanEls = document.querySelectorAll("ul li span")
+const familyPlanSpans = [spanEls[5], spanEls[6], spanEls[7], spanEls[8]]
+
+familyPlanSpans.forEach(span => {
+  assert.isTrue(span.hasAttribute("aria-hidden"))
+})
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Ad-supported streaming
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Curated playlists
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
+          >
+            Start listening
+          </a>
+        </div>
+        <div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
+          <div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
+            <p class="text-4xl font-bold text-white">
+              $9.99<span class="text-base font-medium text-fuchsia-300">/month</span>
+            </p>
+            <p class="text-gray-300">
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-fuchsia-100">
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Ad-free listening
+              </li>
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Offline playback
+              </li>
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Unlimited skips
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-gradient-to-r from-fuchsia-500 to-indigo-600 text-white hover:from-fuchsia-600 hover:to-indigo-700 px-4 py-2 text-center font-semibold"
+          >
+            Go Premium
+          </a>
+        </div>
+        <div class="bg-gray-100 ring-1 ring-gray-300 p-8 rounded-xl grid grid-rows-[1fr_auto] gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Family</h2>
+            <p class="text-4xl font-bold text-gray-900">
+              $14.99<span class="text-base font-medium text-gray-500">/month</span>
+            </p>
+            <p class="text-gray-600">
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+--fcc-editable-region--
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+--fcc-editable-region--
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6867cca6236f87573044a39c.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6867cca6236f87573044a39c.md
new file mode 100644
index 00000000000..5c00148b97f
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/6867cca6236f87573044a39c.md
@@ -0,0 +1,329 @@
+---
+id: 6867cca6236f87573044a39c
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+The last thing you will do is to style the CTA button for the family plan.
+
+Give it the classes `block`, `rounded-md`, `bg-indigo-600`, `px-4`, `py-2`, `text-center`, `font-semibold`, `text-white`, and `hover:bg-indigo-700`.
+
+With that, your Tailwind pricing component workshop is complete!
+
+# --hints--
+
+Your anchor element should have the class `bg-indigo-600`.
+
+```js
+const familyATag = document.querySelectorAll("a")[2]
+
+assert.isTrue(familyATag.classList.contains("bg-indigo-600"))
+```
+
+Your anchor element should have the class `px-4`.
+
+```js
+const familyATag = document.querySelectorAll("a")[2]
+
+assert.isTrue(familyATag.classList.contains("px-4"))
+```
+
+Your anchor element should have the class `py-2`.
+
+```js
+const familyATag = document.querySelectorAll("a")[2]
+
+assert.isTrue(familyATag.classList.contains("py-2"))
+```
+
+Your anchor element should have the class `text-center`.
+
+```js
+const familyATag = document.querySelectorAll("a")[2]
+
+assert.isTrue(familyATag.classList.contains("text-center"))
+```
+
+Your anchor element should have the class `text-white`.
+
+```js
+const familyATag = document.querySelectorAll("a")[2]
+
+assert.isTrue(familyATag.classList.contains("text-white"))
+```
+
+Your anchor element should have the class `font-semibold`.
+
+```js
+const familyATag = document.querySelectorAll("a")[2]
+
+assert.isTrue(familyATag.classList.contains("font-semibold"))
+```
+
+Your anchor element should have the class `hover:bg-indigo-700`.
+
+```js
+const familyATag = document.querySelectorAll("a")[2]
+
+assert.isTrue(familyATag.classList.contains("hover:bg-indigo-700"))
+```
+
+Your anchor element should have the class `rounded-md`.
+
+```js
+const familyATag = document.querySelectorAll("a")[2]
+
+assert.isTrue(familyATag.classList.contains("rounded-md"))
+```
+
+Your anchor element should have the class `block`.
+
+```js
+const familyATag = document.querySelectorAll("a")[2]
+
+assert.isTrue(familyATag.classList.contains("block"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Ad-supported streaming
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Curated playlists
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
+          >
+            Start listening
+          </a>
+        </div>
+        <div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
+          <div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
+            <p class="text-4xl font-bold text-white">
+              $9.99<span class="text-base font-medium text-fuchsia-300">/month</span>
+            </p>
+            <p class="text-gray-300">
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-fuchsia-100">
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Ad-free listening
+              </li>
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Offline playback
+              </li>
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Unlimited skips
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-gradient-to-r from-fuchsia-500 to-indigo-600 text-white hover:from-fuchsia-600 hover:to-indigo-700 px-4 py-2 text-center font-semibold"
+          >
+            Go Premium
+          </a>
+        </div>
+        <div class="bg-gray-100 ring-1 ring-gray-300 p-8 rounded-xl grid grid-rows-[1fr_auto] gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Family</h2>
+            <p class="text-4xl font-bold text-gray-900">
+              $14.99<span class="text-base font-medium text-gray-500">/month</span>
+            </p>
+            <p class="text-gray-600">
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+--fcc-editable-region--
+          <a href="#">Start Family Plan</a>
+--fcc-editable-region--
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1
+        class="mt-8 and mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900"
+      >
+        Choose your listening plan
+      </h1>
+
+      <div
+        class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16"
+      >
+        <div
+          class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] gap-6 rounded-xl p-8"
+        >
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">
+              $0<span class="text-base font-medium text-gray-500">/month</span>
+            </p>
+            <p class="text-gray-600">
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span
+                >Ad-supported streaming
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span
+                >Curated playlists
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
+          >
+            Start listening
+          </a>
+        </div>
+        <div
+          class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105"
+        >
+          <div
+            class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 px-3 py-1 text-xs font-bold text-white rounded-full"
+          >
+            Most Popular
+          </div>
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
+            <p class="text-4xl font-bold text-white">
+              $9.99<span class="text-base font-medium text-fuchsia-300"
+                >/month</span
+              >
+            </p>
+            <p class="text-gray-300">
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-fuchsia-100">
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span
+                >Ad-free listening
+              </li>
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span
+                >Offline playback
+              </li>
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span
+                >Unlimited skips
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-gradient-to-r from-fuchsia-500 to-indigo-600 text-white hover:from-fuchsia-600 hover:to-indigo-700 px-4 py-2 text-center font-semibold"
+            >Go Premium</a
+          >
+        </div>
+        <div
+          class="grid grid-rows-[1fr_auto] gap-6 bg-gray-100 ring-1 ring-gray-300 p-8 rounded-xl"
+        >
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Family</h2>
+            <p class="text-4xl font-bold text-gray-900">
+              $14.99<span class="text-base font-medium text-gray-500"
+                >/month</span
+              >
+            </p>
+            <p class="text-gray-600">
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>All
+                Premium features
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Up
+                to 6 accounts
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span
+                >Individual playlists & libraries
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span
+                >Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-indigo-600 px-4 py-2 text-center font-semibold text-white hover:bg-indigo-700"
+          >
+            Start Family Plan
+          </a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68755a4d49de76991ec3763d.md b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68755a4d49de76991ec3763d.md
new file mode 100644
index 00000000000..c89188ac5a1
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-tailwind-pricing-component/68755a4d49de76991ec3763d.md
@@ -0,0 +1,145 @@
+---
+id: 68755a4d49de76991ec3763d
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+Now, assign the `span` inside the `p` element the classes `text-base`, `font-medium`, and `text-gray-500`.
+
+# --hints--
+
+The `span` inside your `p` element should have the class `text-base`.
+
+```js
+const PEls = document.querySelectorAll("p")
+const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$14.99"))
+const durationSpan = targetP.querySelector("span")
+
+assert.isTrue(durationSpan.classList.contains("text-base"))
+```
+
+The `span` inside your `p` element should have the class `font-medium`.
+
+```js
+const PEls = document.querySelectorAll("p")
+const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$14.99"))
+const durationSpan = targetP.querySelector("span")
+
+assert.isTrue(durationSpan.classList.contains("font-medium"))
+```
+
+The `span` inside your `p` element should have the class `text-gray-500`.
+
+```js
+const PEls = document.querySelectorAll("p")
+const targetP = Array.from(PEls).find(p => p.textContent.startsWith("$14.99"))
+const durationSpan = targetP.querySelector("span")
+
+assert.isTrue(durationSpan.classList.contains("text-gray-500"))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music App Pricing</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gray-100">
+    <main>
+      <h1 class="mt-8 mb-12 text-center text-3xl md:text-5xl font-semibold text-gray-900">Choose your listening plan</h1>
+      <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
+        <div class="bg-gray-100 ring-1 ring-gray-300 grid grid-rows-[1fr_auto] rounded-xl p-8 gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Listener</h2>
+            <p class="text-4xl font-bold text-gray-900">$0<span class="text-base font-medium text-gray-500">/month</span></p>
+            <p>
+              Start exploring millions of songs with basic features and ads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-gray-700">
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Ad-supported streaming
+              </li>
+              <li>
+                <span aria-hidden class="text-green-700 mr-2">&#10003;</span>Curated playlists
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200"
+          >
+            Start listening
+          </a>
+        </div>
+        <div class="relative bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-[1fr_auto] gap-6 rounded-xl scale-105">
+          <div class="absolute -top-3 right-3 bg-gradient-to-r from-fuchsia-500 to-indigo-500 rounded-full px-3 py-1 text-xs font-bold text-white">Most Popular</div>
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-fuchsia-200">Premium</h2>
+            <p class="text-4xl font-bold text-white">
+              $9.99<span class="text-base font-medium text-fuchsia-300">/month</span>
+            </p>
+            <p class="text-gray-300">
+              Enjoy the full music experience with unlimited access and
+              downloads.
+            </p>
+            <ul class="mt-6 space-y-2 text-sm text-fuchsia-100">
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Ad-free listening
+              </li>
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Offline playback
+              </li>
+              <li>
+                <span aria-hidden class="text-green-500 mr-2">&#10003;</span>Unlimited skips
+              </li>
+            </ul>
+          </div>
+          <a
+            href="#"
+            class="block rounded-md bg-gradient-to-r from-fuchsia-500 to-indigo-600 text-white hover:from-fuchsia-600 hover:to-indigo-700 px-4 py-2 text-center font-semibold"
+          >
+            Go Premium
+          </a>
+        </div>
+        <div class="bg-gray-100 ring-1 ring-gray-300 p-8 rounded-xl grid grid-rows-[1fr_auto] gap-6">
+          <div class="grid grid-rows-[auto_auto_auto_1fr] gap-y-2">
+            <h2 class="text-lg font-semibold text-indigo-600">Family</h2>
+--fcc-editable-region--
+            <p class="text-4xl font-bold text-gray-900">$14.99<span >/month</span></p>
+--fcc-editable-region--
+            <p>
+              Enjoy all of the features with a plan for up to 6 family members.
+            </p>
+            <ul>
+              <li>
+                <span>&#10003;</span>All Premium features
+              </li>
+              <li>
+                <span>&#10003;</span>Up to 6 accounts
+              </li>
+              <li>
+                <span>&#10003;</span>Individual playlists &
+                libraries
+              </li>
+              <li>
+                <span>&#10003;</span>Family Mix playlists
+              </li>
+            </ul>
+          </div>
+          <a href="#">Start Family Plan</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/superblock-structure/full-stack.json b/curriculum/superblock-structure/full-stack.json
index f560d495df8..ded6fe612ca 100644
--- a/curriculum/superblock-structure/full-stack.json
+++ b/curriculum/superblock-structure/full-stack.json
@@ -1255,6 +1255,9 @@
             {
               "dashedName": "workshop-tailwind-cta-component"
             },
+            {
+              "dashedName": "workshop-tailwind-pricing-component"
+            },
             {
               "dashedName": "lab-music-shopping-cart-page"
             },