Fix website code examples (#1166)

The code examples in the comments were missing
indentation, e.g.

```
{
  marginTop: env(safe-area-inset-top)
}
```

would be rendered as

```
{
marginTop: env(safe-area-inset-top)
}
```

The trimming seems to be caused by
syntax-tree/mdast-util-mdx-jsx#15

Instead of waiting for an upstream fix this commit
refactors the examples to remove the indentation
and use CSS properties instead of JS objects.

Author: bradleyayers

apps/website/docs/tailwind/new-concepts/safe-area-insets.mdx

@@ -62,130 +62,134 @@ The `h-screen-safe` and `min-h-screen-safe` utilities may not work as expected o
   supported={[
     [
       "m-safe",
-      <code>{`{ 
-  marginTop: env(safe-area-inset-top);
-  marginBottom: env(safe-area-inset-bottom);
-  marginLeft: env(safe-area-inset-left);
-  marginRight: env(safe-area-inset-right);
-}`}</code>,
+      <code>{`\
+margin-top: env(safe-area-inset-top);
+margin-bottom: env(safe-area-inset-bottom);
+margin-left: env(safe-area-inset-left);
+margin-right: env(safe-area-inset-right);
+`}</code>,
     ],
     [
       "p-safe",
-      <code>{`{ 
-  paddingTop: env(safe-area-inset-top);
-  paddingBottom: env(safe-area-inset-bottom);
-  paddingLeft: env(safe-area-inset-left);
-  paddingRight: env(safe-area-inset-right);
-}`}</code>,
+      <code>{`\
+padding-top: env(safe-area-inset-top);
+padding-bottom: env(safe-area-inset-bottom);
+padding-left: env(safe-area-inset-left);
+padding-right: env(safe-area-inset-right);
+`}</code>,
     ],
     [
       "mx-safe",
-      <code>{`{ 
-  marginLeft: env(safe-area-inset-left);
-  marginRight: env(safe-area-inset-right);
-}`}</code>,
+      <code>{`\
+margin-left: env(safe-area-inset-left);
+margin-right: env(safe-area-inset-right);
+`}</code>,
     ],
     [
       "px-safe",
-      <code>{`{ 
-  paddingLeft: env(safe-area-inset-left);
-  paddingRight: env(safe-area-inset-right);
-}`}</code>,
+      <code>{`\
+padding-left: env(safe-area-inset-left);
+padding-right: env(safe-area-inset-right);
+`}</code>,
     ],
     [
       "my-safe",
-      <code>{`{ 
-  marginTop: env(safe-area-inset-top);
-  marginBottom: env(safe-area-inset-bottom);
-}`}</code>,
+      <code>{`\
+margin-top: env(safe-area-inset-top);
+margin-bottom: env(safe-area-inset-bottom);
+`}</code>,
     ],
     [
       "py-safe",
-      <code>{`{ 
-  paddingTop: env(safe-area-inset-top);
-  paddingBottom: env(safe-area-inset-bottom);
-}`}</code>,
+      <code>{`\
+padding-top: env(safe-area-inset-top);
+padding-bottom: env(safe-area-inset-bottom);
+`}</code>,
     ],
     [
       "mt-safe",
-      <code>{`{ 
-  marginTop: env(safe-area-inset-top);
-}`}</code>,
+      <code>{`\
+margin-top: env(safe-area-inset-top);
+`}</code>,
     ],
     [
       "pt-safe",
-      <code>{`{ 
-  paddingTop: env(safe-area-inset-top);
-}`}</code>,
+      <code>{`\
+padding-top: env(safe-area-inset-top);
+`}</code>,
     ],
     [
       "mr-safe",
-      <code>{`{ 
-  marginRight: env(safe-area-inset-top);
-}`}</code>,
+      <code>{`\
+margin-right: env(safe-area-inset-top);
+`}</code>,
     ],
     [
       "pr-safe",
-      <code>{`{ 
-  paddingRight: env(safe-area-inset-top);
-}`}</code>,
+      <code>{`\
+padding-right: env(safe-area-inset-top);
+`}</code>,
     ],
     [
       "mb-safe",
-      <code>{`{ 
-  marginBottom: env(safe-area-inset-top);
-}`}</code>,
+      <code>{`\
+margin-bottom: env(safe-area-inset-top);
+`}</code>,
     ],
     [
       "pb-safe",
-      <code>{`{ 
-  paddingBottom: env(safe-area-inset-top);
-}`}</code>,
+      <code>{`\
+padding-bottom: env(safe-area-inset-top);
+`}</code>,
     ],
     [
       "ml-safe",
-      <code>{`{ 
-  marginLeft: env(safe-area-inset-top);
-}`}</code>,
+      <code>{`\
+margin-left: env(safe-area-inset-top);
+`}</code>,
     ],
     [
       "pl-safe",
-      <code>{`{ 
-  paddingLeft: env(safe-area-inset-top);
-}`}</code>,
+      <code>{`\
+padding-left: env(safe-area-inset-top);
+`}</code>,
     ],
     [
       "*-safe-or-[n]",
       <div>
         <code>*</code> can be substituted for any spacing utility.
         <br />
         <code>[n]</code> can be substituted for any spacing value.
-        <code>{`
-// example using mt
-.mt-safe-or-4 = {
-  marginTop: max(env(safe-area-inset-top), 1rem);
-}`}</code>
+        <code>{`\
+// example using mt-safe-or-4
+margin-top: max(env(safe-area-inset-top), 1rem);
+
+// example using mt-safe-or-[2px]
+margin-top: max(env(safe-area-inset-top), 2px);
+`}</code>
       </div>,
     ],
   ]}
   none={[
     [
       "h-screen-safe",
-      <code>{`{
-  height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)))
-}`}</code>,
+      <code>{`\
+height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)))
+`}</code>,
     ],
     [
       "*-safe-offset-[n]",
       <div>
         <code>*</code> can be substituted for any spacing utility.
         <br />
         <code>[n]</code> can be substituted for any spacing value.
-        <code>{`
-// example using mt
-.mt-safe-offset-4 = {
-  marginTop: calc(env(safe-area-inset-top) + 1rem);
-}`}</code>
+        <code>{`\
+// example using mt-safe-offset-4
+margin-top: calc(env(safe-area-inset-top) + 1rem);
+
+// example using mt-safe-offset-[2px]
+margin-top: calc(env(safe-area-inset-top) + 2px);
+`}</code>
       </div>,
     ],
   ]}