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

[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/button/button.md

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 2249cdf

[mnajdova]

Suggested change

	<Button
	className="cursor-pointer disabled:cursor-not-allowed text-sm bg-violet-500 text-white rounded-md font-semibold px-4 py-2 border-none disabled:opacity-50"
	<Button
	className="cursor-pointer disabled:cursor-not-allowed text-sm bg-violet-500 text-white rounded-md font-semibold px-4 py-2 border-none disabled:opacity-50"

We discussed that it would probably be better if we create a CustomButton instead of adding all classes inline in each button's instance. For e.g.

const CustomButton = React.forwardRef((props, ref) => {
  const { className, ...other } = props;
  return (
    <Button className={clsx("cursor-pointer disabled:cursor-not-allowed text-sm bg-violet-500 text-white rounded-md font-semibold px-4 py-2 border-none disabled:opacity-50", className)} {...other} ref={ref} />
  )
});

I would propose to update all demos following this pattern. It's closer to how developers would do it in their project.

[alisasanib]

Thanks @mnajdova for the explanation. I pushed the changes that you suggested. I'll continue to work on other demos and components if you agree with the implementation :)

[mnajdova]

Excellent 👍 Nice job! In terms of order, I feel that the biggest impact we would make if we move the Introduction demos first on each components page, then we can slowly add the switcher to the other demos too :)