[docs][base] Add Tailwind CSS + plain CSS demo on the Snackbar, Badge, Switch pages

[alisasanib]

• I have followed (at least) the PR section of the contributing guide.

Part of #37222

[mui-bot]

Netlify deploy preview

• docs/data/base/components/badge/badge.md
• docs/data/base/components/snackbar/snackbar.md
• docs/data/base/components/switch/switch.md

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against de079ee

[mnajdova]

@zanivan I am not sure about the Tailwind CSS buttons styles, they are too different than the others. Should we update the demos?

[zanivan]

In this case, all the three styles are too different from the buttons elsewhere. They indeed look great, and similar to the buttons on marketing pages, but I believe we could simplify their design a little and make them similar to what we have on Button demos. I went ahead and made this change, what do you think?

[mnajdova]

Looks great, we can apply these styles on all demos in a dedicated PR 👍

[mnajdova]

Looks good to me now! Thanks!

[alisasanib]

Looks good to me now! Thanks!

Thanks for your comments and review. Shall I continue to update the docs for the remaining components?

[mnajdova]

Thanks for your comments and review. Shall I continue to update the docs for the remaining components?

Yes, for introduction demos only please. Two points:

• Let's wait for [docs] Use IBM Plex Sans in Tailwind CSS demos #38464 to be merged, it would easy up the rebase :) (I am just waiting for the CI to be green)
• Please create the custom components by the component name, for e.g. not CustomSlider, but Slider, we can use the Base prefix for the imports from Base UI to resolve the conflict in the names

[alisasanib]

Thanks for your comments and review. Shall I continue to update the docs for the remaining components?

Yes, for introduction demos only please. Two points:

• Let's wait for [docs] Use IBM Plex Sans in Tailwind CSS demos #38464 to be merged, it would easy up the rebase :) (I am just waiting for the CI to be green)
• Please create the custom components by the component name, for e.g. not CustomSlider, but Slider, we can use the Base prefix for the imports from Base UI to resolve the conflict in the names

Thanks for the comments. I'll consider them for the next demos :)