--description--

Now that the HTML structure is built out, it's time to move to the proper styling with Tailwind.

Begin with the div element that wraps the entire content. Set its background color by giving it a class of bg-indigo-600.

--hints--

Your outer div should have a class attribute set to bg-indigo-600.

const firstDiv = document.querySelectorAll("div")[0];
assert.isTrue(firstDiv.classList.contains("bg-indigo-600"));

--seed--

--seed-contents--

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CTA component</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    --fcc-editable-region--
    <div>
      <div>
        <span>Soundflow</span>
        <h1>Discover New Music</h1>
        <p>Stream your favorite tracks and discover new artists.</p>
      </div>
      <div>
        <a href="#">Learn more</a>
        <a href="#">Start listening</a>
      </div>
    </div>
   --fcc-editable-region--
  </body>
</html>

Step 4

--description--

--hints--

--seed--

--seed-contents--