[docs] Add interactive examples or links to playground demos

### Describe the feature request

[Somewhat related to #832.](https://github.com/facebook/stylex/issues/832)

I've been meaning to read the new recipes section but had a hard time following because the code didn't have easy-to-access live demos or playgrounds as references. But I can very easily generate a playground using a recipe as an input to an AI (such as ChatGPT) and get the code provided below.

I would love it if the documentation made heavy use of either embedding playgrounds or linking to playgrounds so that it's much easier to follow along and discover new patterns.

---

This was generated with AI. This is kind of what I was imagining I could see or be linked to when reading for example the [Variants recipe](https://stylexjs.com/docs/learn/recipes/variants/).

View Code Example

```jsx
import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
base: {
appearance: 'none',
borderWidth: 0,
borderRadius: 4,
cursor: 'pointer',
},
});

const colorVariants = stylex.create({
primary: {
backgroundColor: {
default: 'blue',
':hover': 'darkblue',
},
color: 'white',
},
secondary: {
backgroundColor: {
default: 'gray',
':hover': 'darkgray',
},
color: 'white',
},
});

const sizeVariants = stylex.create({
small: {
fontSize: '1rem',
paddingBlock: 4,
paddingInline: 8,
},
medium: {
fontSize: '1.2rem',
paddingBlock: 8,
paddingInline: 16,
},
large: {
fontSize: '1.5rem',
paddingBlock: 12,
paddingInline: 24,
},
});

function Button({ color = 'primary', size = 'small', ...props }) {
return (

{props.children}

);
}

// Usage Example with all combinations
export default function App() {
return (