curriculum/challenges/english/blocks/workshop-tailwind-cta-component/6858eadd3144c89d45e02bc7.md
If you notice, the outer div is too attached to the top and the content in it is too stacked to the left. So, you should work on some spacing now.
Add the class mt-8 to the div to push it down a bit and p-4 to shift the text away from the left.
Your outer div element should the utility class mt-8.
const firstDiv = document.querySelectorAll("div")[0];
assert.isTrue(firstDiv.classList.contains("mt-8"));
Your outer div element should the utility class p-4.
const firstDiv = document.querySelectorAll("div")[0];
assert.isTrue(firstDiv.classList.contains("p-4"));
<!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 class="bg-indigo-600 text-white">
<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>