curriculum/challenges/english/blocks/workshop-tailwind-pricing-component/6867c9fd16b48f2abe22bdaa.md
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.
Your p element should have the class text-4xl.
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.
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.
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"))
<!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">✓</span>Ad-supported streaming
</li>
<li>
<span aria-hidden class="text-green-700 mr-2">✓</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">✓</span>Ad-free listening
</li>
<li>
<span aria-hidden class="text-green-500 mr-2">✓</span>Offline playback
</li>
<li>
<span aria-hidden class="text-green-500 mr-2">✓</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>✓</span>All Premium features
</li>
<li>
<span>✓</span>Up to 6 accounts
</li>
<li>
<span>✓</span>Individual playlists &
libraries
</li>
<li>
<span>✓</span>Family Mix playlists
</li>
</ul>
</div>
<a href="#">Start Family Plan</a>
</div>
</div>
</main>
</body>
</html>