[docs][base] Add Tailwind CSS & plain CSS demos on the Popper page

[zanivan]

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

Part of #37222

[mui-bot]

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against b2861ad

[zanivan]

@mnajdova is the Tailwind demo like this on dark mode for you too? I don't understand why the black: styles are not being applied to it. Do you know what could be causing this?

[michaldudak]

Is there any specific reason we don't reuse the styles of the buttons from the Button docs? I feel they look better, and they have better contrast when hovered over.
Plus, we'd have one less variant to maintain.

[zanivan]

Is there any specific reason we don't reuse the styles of the buttons from the Button docs?

The reasons were to 1. Keep consistent with the other buttons on the page (outlined) and 2. The demo is not the button itself, so having an outlined version would represent the secondary hierarchy.

Though we had these reasons when it was done, I also feel that the demos we have on the Button docs are better. Therefore, I'm down for revamping these from all the docs--maybe in a separate PR?

[mnajdova]

@mnajdova is the Tailwind demo like this on dark mode for you too? I don't understand why the black: styles are not being applied to it. Do you know what could be causing this?

I fixed it, for elements that render directly inside the body we need to have the dark class applied on the outer most element - the popper in this case. I also updated the migration steps with this note.

[zanivan]

@mnajdova do you know what can possibly be causing the ci/circleci: test_lint fail? I thought it could be the box-shadow without px, but it appears that it's not it.