--- name: tailwind-components description: Common Tailwind component patterns user-invocable: false --- # Tailwind Components Skill Common component patterns built with Tailwind CSS. ## Buttons ### Button Variants ```html

Card Title<\/h3>
Card description text goes here.<\/p> <\/div> ``` ### Card with Image ```html

Card Title<\/h3>
Card description.<\/p>

Card Title<\/h3>
Card description.<\/p>

Warning<\/h4>
Please review this.<\/p> <\/div> <\/div> <\/div>

Error<\/h4>
Something went wrong.<\/p> <\/div> <\/div> <\/div> ``` ## Badges ```html New <\/span> Active <\/span> Urgent <\/span> Label <\/span> ``` ## Integration Used by: - `frontend-developer` agent - `fullstack-developer` agent

Error<\/h4>
Something went wrong.<\/p> <\/div> <\/div> <\/div> ``` ## Badges ```html New <\/span> Active <\/span> Urgent <\/span> Label <\/span> ``` ## Integration Used by: - `frontend-developer` agent - `fullstack-developer` agent

Card Title<\/h3> Card description text goes here.<\/p> <\/div> ``` ### Card with Image ```html Card Title<\/h3> Card description.<\/p>

Card Title<\/h3> Card description.<\/p>

Error<\/h4> Something went wrong.<\/p> <\/div> <\/div> <\/div> ``` ## Badges ```html New <\/span> Active <\/span> Urgent <\/span> Label <\/span> ``` ## Integration Used by: - `frontend-developer` agent - `fullstack-developer` agent

Card Title<\/h3>
Card description text goes here.<\/p> <\/div> ``` ### Card with Image ```html

Card Title<\/h3>
Card description.<\/p>

Card Title<\/h3>
Card description.<\/p>

Error<\/h4>
Something went wrong.<\/p> <\/div> <\/div> <\/div> ``` ## Badges ```html New <\/span> Active <\/span> Urgent <\/span> Label <\/span> ``` ## Integration Used by: - `frontend-developer` agent - `fullstack-developer` agent