add starting style example

Author: danhollick

src/pages/docs/v4-beta.mdx

@@ -1167,9 +1167,9 @@ This works with any variant where it makes sense, including `group-*`, `peer-*`,
 The new `starting` variant adds support for the new CSS `@starting-style` feature, making it possible to transition element properties when an element is first displayed:
 
 ```html {{example: {hint: 'Click the button to see the popover animate in'}}}
-<div class="relative pt-8 pb-12 grid justify-center">
+<div class="relative py-8 grid justify-center">
   <button popovertarget="my-popover" class="rounded-lg bg-blue-600 hover:bg-blue-500 text-white shadow px-2.5 py-1 font-semibold">Check for updates</button>
-  <div popover id="my-popover" class="rounded-md bg-blue-50 p-4 opacity-0 transition-all [transition-behavior:allow-discrete] duration-500 [&:is([open],:popover-open)]:opacity-100 [@starting-style]:[&:is([open],:popover-open)]:opacity-0">
+  <div popover id="my-popover" class="rounded-md bg-blue-50 p-4 opacity-0 transition-all [transition-behavior:allow-discrete] duration-500 [&:is([open],:popover-open)]:opacity-100 [&:is([open],:popover-open)]:my-0 [&:is([open],:popover-open)]:mt-auto [&:is([open],:popover-open)]:mb-4 [@starting-style]:[&:is([open],:popover-open)]:opacity-0 ">
     <div class="flex">
       <div class="shrink-0">
         <svg class="size-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon"><path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z" clip-rule="evenodd" /></svg>