curriculum/challenges/english/blocks/workshop-tailwind-cta-component/6858ebf2552046ab3de9f17c.md
At this point, you'll notice there's too much space to the right of the content in the div. You can minimize this by adding a width.
Add the class md:w-1/2 to the div to reduce the width to 50% on medium and larger screens. That is, screens that are 768 pixels and up.
To see that in effect, expand the preview tab.
Your outer div element should have the utility class md:w-1/2.
const firstDiv = document.querySelectorAll("div")[0];
assert.isTrue(firstDiv.classList.contains("md:w-1/2"));
<!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 mt-8 p-4">
<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>