Build a Pricing Component - Step 47

Programming HTML-CSS
1

Tell us what’s happening:

I’m stuck on Step 47 of the “Build a Pricing Component” project. The step asks me to assign the class text-gray-600 to the paragraph under the price text in the Family plan card.
The preview is rendering the Family card correctly, but the test keeps saying “Your p element should have the class text-gray-600” even though it clearly does.

Your code so far

<!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="text-3xl text-center font-semibold text-gray-900 md:text-5xl mt-8 mb-12">Choose your listening plan</h1>
    
    <div class="grid grid-cols-1 md:grid-cols-3 max-w-6xl mx-auto gap-8 mt-16">
      
      <!-- Listener Plan -->
      <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>
          <ul class="mt-6 space-y-2 text-sm text-gray-700">
            <li><span aria-hidden="true" class="text-green-700 mr-2">&#10003;</span> Ad-supported streaming</li>
            <li><span aria-hidden="true" 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>

      <!-- Premium Plan -->
      <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 ad-free music, offline listening, and higher audio quality.</p>
          <ul class="mt-6 space-y-2 text-sm text-fuchsia-100">
            <li><span aria-hidden="true" class="text-green-500 mr-2">&#10003;</span> Ad-free streaming</li>
            <li><span aria-hidden="true" class="text-green-500 mr-2">&#10003;</span> Offline playback</li>
            <li><span aria-hidden="true" class="text-green-500 mr-2">&#10003;</span> High-fidelity audio</li>
          </ul>
        </div>
        <a href="#" class="block rounded-md bg-gradient-to-r from-fuchsia-500 to-indigo-600 text-white px-4 py-2 text-center font-semibold hover:from-fuchsia-600 hover:to-indigo-700">Go Premium</a>
      </div>

      <!-- Family Plan -->
<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">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">Share your account with up to 6 members with individual accounts.</p>
    <!-- Feature list to be added next -->
  </div>

<!-- User Editable Region -->

  <!-- CTA to be added next -->
</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">Get Family Plan</a>

<!-- User Editable Region -->

      </div>
      
    </div>
  </main>
</body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36

Challenge Information:

Build a Pricing Component - Step 47

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/workshop-tailwind-pricing-component/6867caa0dbbeb93570ec0069.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

you made many changes to the code for this step, how so?

3

Hi buddy, Here you need to do add the class in the p tag

<p class="class-name">This is the paragraph</p>

See this is the class here how we’ve added here.

Hope You Understand !!