curriculum/challenges/english/blocks/workshop-tailwind-pricing-component/6864d9999f8a4e3f0d569a3f.md
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.
Your h1 element should have the class text-3xl.
const h1El = document.querySelector("h1")
assert.isTrue(h1El.classList.contains("text-3xl"))
Your h1 element should have the class text-center.
const h1El = document.querySelector("h1")
assert.isTrue(h1El.classList.contains("text-center"))
Your h1 element should have the class font-semibold.
const h1El = document.querySelector("h1")
assert.isTrue(h1El.classList.contains("font-semibold"))
Your h1 element should have the class text-gray-900.
const h1El = document.querySelector("h1")
assert.isTrue(h1El.classList.contains("text-gray-900"))
Your h1 element should have the class md:text-5xl.
const h1El = document.querySelector("h1")
assert.isTrue(h1El.classList.contains("md:text-5xl"))
<!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>✓</span>Ad-supported streaming</li>
<li><span>✓</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>✓</span>Ad-free listening</li>
<li><span>✓</span>Offline playback</li>
<li><span>✓</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>✓</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>