[Other]: Update example in TabsCodeBlocks component

[amirhhashemi]

📋 Explain your issue

For some reason, Prettier does not format fenced code blocks inside JSX unless the following conditions are met:

1. There is a blank line at the top and bottom of the block.
2. The block starts at the beginning of the line (with no indentation).

For example, Prettier does not recognize the fenced code block in this code:

<TabsCodeBlocks>
  <div id="npm">
    ```bash frame="none"
    npm install @macaron-css/core @macaron-css/solid
    ```
  </div>
</TabsCodeBlocks>

As a result, it formats it incorrectly like this:

<TabsCodeBlocks>
  <div id="npm">
    ```bash frame="none" npm install @macaron-css/core @macaron-css/solid ```
  </div>
</TabsCodeBlocks>

To help prevent this issue, I suggest updating the example from the TabsCodeBlocks component. Change it from:

 * @example
 * // jsx
 * <TabsCodeBlocks>
 *   <div id="npm">
 *     \```bash frame="none"
 *       npm install
 *     \```
 *   </div>
 *   <div id="yarn">
 *     \```bash frame="none"
 *       yarn install
 *     \```
 *   </div>
 *   ...
 * </TabsCodeBlocks>

to something like this:

 * @example
 * // jsx
 * <TabsCodeBlocks>
 * <div id="npm">
 *
 * ```bash frame="none"
 * npm install
 * ```
 *
 * </div>
 * <div id="yarn">
 *
 * ```bash frame="none"
 * yarn install
 * ```
 *
 * </div>
 * ...
 * </TabsCodeBlocks>

It would also be helpful to leave a note about this issue too.

Feel free to assign this task to me if you’d like.

[LadyBluenotes]

@atilafassina when you get a chance, could you please review this / provide feedback?

[LadyBluenotes]

I believe this might get addressed with #998 ? Please confirm!

[amirhhashemi]

@LadyBluenotes No. That PR addresses issues in the existing content, but if anyone wants to use <TabsCodeBlocks> for new content, I believe an updated example would be helpful.