docs(popover-examples): simplify inspect styles

Author: maiieul

apps/website/src/routes/docs/headless/popover/examples/inspect.tsx

@@ -1,43 +1,13 @@
-import { component$, useStyles$ } from '@builder.io/qwik';
+import { component$ } from '@builder.io/qwik';
 import { Popover, PopoverTrigger } from '@qwik-ui/headless';
 
 export default component$(() => {
-  useStyles$(`
-  .my-animation.popover-showing {
-    animation: popoverFadeIn 300ms ease;
-  }
-
-  .my-animation.popover-closing {
-    animation: popoverFadeOut 300ms ease;
-  }
-
-    @keyframes popoverFadeIn
-    from {
-      opacity: 0;
-    } to {
-      opacity: 1;
-    }
-    
-    @keyframes popoverFadeOut
-    from {
-      opacity: 1;
-    } to {
-      opacity: 0;
-    }
-  `);
-
   return (
     <>
-      <PopoverTrigger
-        popovertarget="inspect-id"
-        class="rounded-base border-2 border-slate-300 bg-slate-800 px-3 py-1 text-white"
-      >
+      <PopoverTrigger popovertarget="inspect-id" class="popover-trigger">
         Inspect the popover!
       </PopoverTrigger>
-      <Popover
-        id="inspect-id"
-        class="max-w-[20rem] rounded-base border-2 border-slate-300 bg-slate-800 p-4 shadow-md"
-      >
+      <Popover id="inspect-id" class="popover">
         <p class="leading-5">
           I'm in the <strong>:top-layer</strong> pseudo element on supported browsers like
           chrome.