Challenge: Creating a Sticky Note Component with Vue

Practice creating a reusable sticky note component with Vue in this challenge.

We'll cover the following

Problem statement

Create a reusable sticky note component with Vue. Define the note’s title, content, and label as props. In the template, use the appropriate utility classes to:

  • Make the note’s card light yellow, rounded, with a medium shadow effect.

  • Put a sticky-note icon at the top right corner with sky-600 color.

  • Make the title’s text bold and large with slate-600 color.

  • Make the content’s text extra small with tight leading and wide tracking.

  • Make the label’s paragraph displayed inline and rounded with lime-900 text color and lime-300 background color.

  • Add margins and/or padding where appropriate.

Expected output

The output should look look like the following image:

Get hands-on with 1200+ tech skills courses.