curriculum/challenges/english/blocks/workshop-tailwind-pricing-component/686386e76197458b7dfd52f9.md
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.
Your body element should have the class bg-gray-100.
const bodyEl = document.querySelector("body");
assert.equal(bodyEl.className, "bg-gray-100");
<!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>✓</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>