curriculum/challenges/english/blocks/workshop-tailwind-cta-component/68597114730d7c6b8838d204.md
The paragraph under the h1 looks good, so it doesn't need any more styling. That means you can move to the anchor elements inside the second div element.
Give the first anchor element the classes bg-white, hover:bg-gray-100, and text-indigo-600. This gives it a white background, a text-color of indigo, and a slightly light background when you hover on it.
For the second anchor element, give it the classes bg-pink-500, hover:bg-pink-600, and text-white.
Your first anchor element should have the utility class bg-white.
const anchorEls = document.querySelectorAll("a");
assert.isTrue(anchorEls[0].classList.contains("bg-white"));
Your first anchor element should have the utility class hover:bg-gray-100.
const anchorEls = document.querySelectorAll("a");
assert.isTrue(anchorEls[0].classList.contains("hover:bg-gray-100"));
Your first anchor element should have the utility class text-indigo-600.
const anchorEls = document.querySelectorAll("a");
assert.isTrue(anchorEls[0].classList.contains("text-indigo-600"));
Your second anchor element should have the utility class bg-pink-500.
const anchorEls = document.querySelectorAll("a");
assert.isTrue(anchorEls[1].classList.contains("bg-pink-500"));
Your second anchor element should have the utility class hover:bg-pink-600.
const anchorEls = document.querySelectorAll("a");
assert.isTrue(anchorEls[1].classList.contains("hover:bg-pink-600"));
Your second anchor element should have the utility class text-white.
const anchorEls = document.querySelectorAll("a");
assert.isTrue(anchorEls[1].classList.contains("text-white"));
<!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>
<div>
--fcc-editable-region--
<a href="#">
Learn more
</a>
<a href="#">
Start listening
</a>
--fcc-editable-region--
</div>
</div>
</body>
</html>