---
id: 68551b677a5f6898af364b85
title: Step 1
challengeType: 0
dashedName: step-1
demoType: onLoad
---

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

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

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

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