fix some z-index bugs

Author: milomg

playground/components/header.tsx

@@ -69,7 +69,7 @@ export const Header: Component<{
 
   return (
     <header
-      class="p-2 flex text-sm justify-between items-center bg-brand-default text-white z-20"
+      class="p-2 flex text-sm justify-between items-center bg-brand-default text-white"
       classList={{ 'md:col-span-3': !props.isHorizontal }}
     >
       <h1 class="flex items-center space-x-4 uppercase leading-0 tracking-widest">
@@ -80,7 +80,6 @@ export const Header: Component<{
       </h1>
       <div class="flex items-center space-x-2">
         <Dismiss
-          class="z-10"
           classList={{ 'absolute top-[53px] right-[10px] w-[fit-content]': showMenu() }}
           menuButton={() => menuBtnEl}
           open={showMenu}
@@ -183,7 +182,7 @@ export const Header: Component<{
           classList={{
             'border-white border': showMenu(),
           }}
-          class="z-40 px-3 py-2 focus:outline-none focus:ring-1 rounded text-white opacity-80 hover:opacity-100 visible relative md:hidden m-0 mr-[10px]"
+          class="px-3 py-2 focus:outline-none focus:ring-1 rounded text-white opacity-80 hover:opacity-100 visible relative md:hidden m-0 mr-[10px]"
           title="Mobile Menu Button"
           ref={menuBtnEl}
         >

src/components/repl.tsx

@@ -268,7 +268,7 @@ export const Repl: Component<ReplProps> = (props) => {
           (props.ref as (el: HTMLDivElement) => void)(el);
         }
       }}
-      class="relative grid bg-blueGray-50 h-full overflow-hidden text-blueGray-900 dark:text-blueGray-50 font-sans z-50"
+      class="relative grid bg-blueGray-50 h-full text-blueGray-900 dark:text-blueGray-50 font-sans"
       classList={{
         'wrapper--forced': props.isHorizontal,
         wrapper: !props.isHorizontal,

src/components/tab/item.tsx

@@ -3,7 +3,7 @@ import type { Component, JSX } from 'solid-js';
 export const TabItem: Component<Props> = (props) => {
   return (
     <li
-      class={`relative z-10 inline-flex text-sm font-sans leading-snug items-center bg-blueGray-500 bg-opacity-0 hover:bg-opacity-5 overflow-hidden space-x-2 border-solid border-brand-default dark:border-gray-200 border-opacity-5 dark:border-opacity-5 border-b-2 ${
+      class={`relative inline-flex text-sm font-sans leading-snug items-center bg-blueGray-500 bg-opacity-0 hover:bg-opacity-5 overflow-hidden space-x-2 border-solid border-brand-default dark:border-gray-200 border-opacity-5 dark:border-opacity-5 border-b-2 ${
         props.class || ''
       }`}
       classList={{