curriculum/challenges/english/blocks/workshop-tailwind-pricing-component/6864dafe72087c517e80f6e0.md
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.
Your h1 element should have the class mt-8.
const h1El = document.querySelector("h1")
assert.isTrue(h1El.classList.contains("mt-8"))
Your h1 element should have the class mb-12.
const h1El = document.querySelector("h1")
assert.isTrue(h1El.classList.contains("mb-12"))
<!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>✓</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>