--description--

Lastly, the buttons can be better spaced apart and from the top. To do that, you need to target the div element that wraps them both. So, add the classes flex, gap-2, and mt-6 to that div.

With that, your CTA component workshop is complete!

--hints--

The div element that wraps the anchor elements should have the utility class flex.

const targetDiv = document.querySelectorAll("div")[2];
assert.isTrue(targetDiv.classList.contains("flex"));

The div element that wraps the anchor elements should have the utility class gap-2.

const targetDiv = document.querySelectorAll("div")[2];
assert.isTrue(targetDiv.classList.contains("gap-2"));

The div element that wraps the anchor elements should have the utility class mt-6.

const targetDiv = document.querySelectorAll("div")[2];
assert.isTrue(targetDiv.classList.contains("mt-6"));

--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>
    <div class="bg-indigo-600 text-white mt-8 p-4 md:w-1/2 mx-auto flex flex-col lg:flex-row justify-around items-center rounded-md">
      <div>
        <span class="uppercase">Soundflow</span>
        <h1 class="font-bold text-4xl my-4">Discover New Music</h1>
        <p>Stream your favorite tracks and discover new artists.</p>
      </div>
--fcc-editable-region--
      <div >
        <a
          href="#"
          class="bg-white hover:bg-gray-100 text-indigo-600 px-4 py-2 font-semibold rounded"
        >
          Learn more
        </a>
        <a
          href="#"
          class="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 font-semibold rounded"
         >
          Start listening
        </a>
      </div>
--fcc-editable-region--
    </div>
  </body>
</html>

--solutions--