Challenge: Creating a Sticky Note Component with Vue

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: