[docs][base] Add Tailwind CSS + plain CSS demo on the Select page

[mnajdova]

Preview: https://deploy-preview-37725--material-ui.netlify.app/base-ui/react-select/#basics
Part of #37222

[mui-bot]

Netlify deploy preview

• docs/data/base/components/select/select.md

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 5c287c0

[zanivan]

I made a slight tweak to the Tailwind demo background by using slate-800 instead of 900—This will give it a lighter tone, aligning it more closely with the plain CSS and System demos.

Also, for some reason the Tailwind demo has a very strong border on the listbox and I couldn't find why. The border width with 1px would be perfect—On tailwind this should be the default size just by using border

[michaldudak]

Is it intended for the Tailwind demo to have a different font on the combobox?

[mnajdova]

Is it intended for the Tailwind demo to have a different font on the combobox?

We decided to not use the same font as the other demos (system and plain CSS) on the first pull request. Happy to revisit the subject. cc @danilo-leal

[mnajdova]

Also, for some reason the Tailwind demo has a very strong border on the listbox and I couldn't find why. The border width with 1px would be perfect—On tailwind this should be the default size just by using border

I fixed it, looks better now.

[zanivan]

Thanks for the adjustments @mnajdova it looks good!
I've added a few more tweaks on dark mode just to increase the contrast and be a bit more visually consistent overall, but I think we're good to go!

[ryota-murakami]

@michaldudak How do you write <style> tag as a React Component?
I've tried this but occurring error that doesn't allow <style> tag as JSX.

[michaldudak]

You have to write style's contents as a string:

<style>
  {`div {
    color: red;
  }`}
</style>

[ryota-murakami]

Thank you!