Feat/badge component

[codedbydollys10]

Pull Request Description

Adds a reusable CSS-only badge component submission under badge-component, providing theme-aware status labels and tag styles for use cases like notifications, product statuses, and feature tags.

---

Closes #1253

Type of Change

• ✨ New animation / hover effect
• 🧩 New component
• 📝 Documentation improvement
• 🐛 Bug fix in an existing submission
• Other (describe below)

---

Submission Checklist

⚠️ PRs that fail this checklist will be closed without review.

• All changes are inside badge-component
• Includes demo.html — self-contained, opens in browser with no server
• Includes style.css — raw CSS for the proposed feature
• Includes README.md — what it does, how to use it, why it fits EaseMotion CSS
• No changes to core
• No changes to components
• One feature per PR (no bundled unrelated changes)

---

Feature Description

What does this add?

A lightweight badge component system with .ease-badge as the base class and semantic color modifiers for success, warning, danger, primary, secondary, and info.

How does a developer use it?

<span class="ease-badge">Default</span>
<span class="ease-badge ease-badge-success">Success</span>
<span class="ease-badge ease-badge-warning">Warning</span>
<span class="ease-badge ease-badge-danger">Danger</span>

Why does it fit EaseMotion CSS?

It follows EaseMotion CSS’s utility-first, animation-aware philosophy by delivering a composable visual component with no JavaScript, responsive layout support, and dark-mode / reduced-motion readiness.

---

Demo

• Demo added (demo.html works by opening directly in a browser)

---

Browser Testing

• Chrome
• Firefox
• Edge
• Safari (optional but appreciated)

---

Notes for Maintainer

• The demo page shows 10 real-world badge scenarios.
• style.css includes both the badge utility styles and demo page styling for self-contained review.
• No framework or build dependencies are required.

---

Reminder: Only the repository maintainer may merge pull requests.
Do not self-merge, even if you have write access.
Maximum 2 active assigned issues per contributor — unassign extras before opening a PR.

[github-actions]

✅ Submission Validation Passed!

Great job! All required files are present.

📁 Folder: submissions/examples/badge-component

Files found:

• ✅ demo.html
• ✅ style.css
• ✅ README.md

📁 Folder: submissions/examples/skeleton-loading-utilities

Files found:

• ✅ demo.html
• ✅ style.css
• ✅ README.md

🚀 Next Steps:

• The maintainer will review your PR
• Respond to any feedback if requested
• Once approved, your contribution will be merged!

Thank you for contributing to EaseMotion CSS! 🎉

[codedbydollys10]

hey @SAPTARSHI-coder pls review my pr & merge it

[codedbydollys10]

hey @SAPTARSHI-coder pls merge it if u want I can fix the ci of validation too