--description--

In this workshop, you will learn more about Tailwind CSS by using its flexbox utility classes to build a responsive call to action (CTA) component.

The basic HTML boilerplate has been provided for you, so you need to build out the HTML elements first.

Begin by creating a div element. Inside that div, create two more separate div elements.

--hints--

You should create a div element.

assert.exists(document.querySelector("div"));

You should have two more div elements inside the div element.

assert.lengthOf(document.querySelectorAll("div > div"), 2)

--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--

    --fcc-editable-region--
  </body>
</html>

Step 1

--description--

--hints--

--seed--

--seed-contents--