Build a Pricing Component - Step 47

Curriculum Help
1

Tell us what’s happening: Step 47 not working text-gray-600

The code is not being accepted even though I have assigned the text-gray-600 class to the paragraph under the price text exactly as instructed. I have also tried applying the class to the relevant paragraphs, but the checker still shows the same error: “Your p element should have the class text-gray-600.” Please check whether there is an issue with the test or the expected code structure.

Your code so far

<!-- User Editable Region -->
          <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>

            <ul class="mt-6 space-y-2 text-sm text-gray-700">
              <li><span aria-hidden class="text-green-700 mr-2">&#10003;</span>Up to 6 accounts</li>
              <li><span aria-hidden class="text-green-700 mr-2">&#10003;</span>Ad-free streaming</li>
              <li><span aria-hidden class="text-green-700 mr-2">&#10003;</span>Parental controls</li>
            </ul>
          </div>

          <a href="#" class="bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200 block rounded-md">
            Start family plan
          </a>
        </div>

      </div>
    </main>
  </body>
</html>
<!-- User Editable Region -->

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/153.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

your code does not match the code of this step, please reset the step and try again, then add the class to the highlighted p element

image
image630×287 23.6 KB

3

(CHECK NOW)

<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>

<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">



    <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 class="text-green-700 mr-2">&#10003;</span>Ad-supported streaming</li>

          <li><span aria-hidden class="text-green-700 mr-2">&#10003;</span>Curated playlists</li>

        </ul>

      </div>



      <a href="#" class="bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200 block rounded-md">

        Start listening

      </a>

    </div>



    <div class="bg-gray-950 text-white ring-2 ring-fuchsia-500 p-8 grid grid-rows-\[1fr_auto\] gap-6 rounded-xl scale-105 relative">

      <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 unlimited music with premium features and no ads.

        </p>



        <ul class="mt-6 space-y-2 text-sm text-fuchsia-100">

          <li><span aria-hidden class="text-green-500 mr-2">&#10003;</span>Ad-free streaming</li>

          <li><span aria-hidden class="text-green-500 mr-2">&#10003;</span>Unlimited skips</li>

          <li><span aria-hidden class="text-green-500 mr-2">&#10003;</span>Offline listening</li>

        </ul>

      </div>



      <a href="#" class="bg-gradient-to-r from-fuchsia-500 to-indigo-600 text-white hover:from-fuchsia-600 hover:to-indigo-700 rounded-md block 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>



        <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>



        <ul class="mt-6 space-y-2 text-sm text-gray-700">

          <li><span aria-hidden class="text-green-700 mr-2">&#10003;</span>Up to 6 accounts</li>

          <li><span aria-hidden class="text-green-700 mr-2">&#10003;</span>Ad-free streaming</li>

          <li><span aria-hidden class="text-green-700 mr-2">&#10003;</span>Parental controls</li>

        </ul>

      </div>



      <a href="#" class="bg-indigo-100 px-4 py-2 text-center font-semibold text-indigo-700 hover:bg-indigo-200 block rounded-md">

        Start family plan

      </a>

    </div>



  </div>

</main>
4

there are still extra changes

also please

There are two ways you can format your code to make it easier to read and test:

  1. After you copy/paste your code into the editor, select it by dragging your cursor over it then click the (</>) button in the toolbar to automatically wrap your code in backticks. (You can click on the animated demo image below to enlarge it.)

1356×380 401 KB

  1. Manually add three backticks on a new line above your code and on a new line after your code. Note that a backtick is NOT the same as a single quote('). To find the backtick key on your keyboard, see this post.

To see changes to your post as you make them, you can click the (M+) button on the toolbar to bring up the rich text editor:

image
image482×117 7.55 KB