[docs] Update installation commands to use the new tabs code component

[danilo-leal]

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

This PR updates installation commands with the new HighlightedCodeWithTabs component, adding tabs to the code blocks. Picking up from a fantastic work by @alexfauquette on the component; here, I've refined the styles & updated the Core libraries docs.

https://deploy-preview-37927--material-ui.netlify.app/material-ui/getting-started/installation/

Before	After

[mui-bot]

Netlify deploy preview

• docs/data/base/getting-started/quickstart/quickstart.md
• docs/data/joy/getting-started/installation/installation.md
• docs/data/material/components/about-the-lab/about-the-lab.md
• docs/data/material/components/material-icons/material-icons.md
• docs/data/material/getting-started/installation/installation.md

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 57fb423

[danilo-leal]

@alexfauquette Would you know why, upon entering a new page, sometimes the blocks look separated? After a refresh, it gets fixed but it definitely looks like some bug 🤔

[samuelsycamore]

Love it! The Material Icons and About the lab pages could use these too. There may be a few other random pages here and there as well.

[alexfauquette]

Thanks for the follow-up :)

[danilo-leal]

@alexfauquette Awesome! I'll be merging this one now but we might want to take a look at why #37927 (comment) is happening 😬

[alexfauquette]

@danilo-leal I do not manage to reproduce the bug. Could you open an issue for it with docs-infra label such that we can keep it in mind to solve it when we've time.

[oliviertassinari]

• Niiice!
• I removed the docs-infra labels, this PR is about the docs.
• I imagine that now, someone can rebase [docs] Add pnpm commands to Material UI Installation page #36650 on HEAD? :)