Convert game screen to tailwind

src/components/gui/Menu.vue

@@ -1,5 +1,5 @@
 <template>
-  <ul class="list-none flex gap-2.5">
+  <ul class="list-none flex gap-2.5 items-center">
     <li class="menu-item relative">
       <div class="absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
         <p class="absolute w-full bottom-0 m-0 text-sm leading-6">Chat</p>

src/screens/Game.vue

@@ -1,17 +1,17 @@
 <template>
-  <div class="game-container">
+  <div class="game-container flex justify-center items-center h-dvh p-[30px] relative">
     <GmTools v-if="isLoaded" />
     <GmPanel v-if="isLoaded" />
 
     <Game class="game" :config="gameConfig" @create="createGame" v-if="!zoneEditorStore.active">
       <Scene name="main" @preload="preloadScene" @create="createScene">
-        <div class="top-ui" v-if="isLoaded">
+        <div class="top-ui flex absolute justify-between left-0 right-0 top-[48px] mx-[48px] my-0" v-if="isLoaded">
           <Hud />
         </div>
         <div class="center-ui" v-if="isLoaded">
           <World />
         </div>
-        <div class="bottom-ui" v-if="isLoaded">
+        <div class="bottom-ui flex absolute justify-between left-0 right-0 bottom-[100px] h-[100px] mx-[48px] my-0" v-if="isLoaded">
           <Chat />
           <Menubar />
         </div>
@@ -166,35 +166,4 @@ const createScene = (scene: Phaser.Scene) => {
   //   grid.setSize(window.innerWidth, window.innerHeight);
   // });
 }
-</script>
-
-<style scoped lang="scss">
-.game-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  padding: 30px;
-  position: relative;
-}
-
-.top-ui,
-.bottom-ui {
-  display: flex;
-  position: absolute;
-  justify-content: space-between;
-  left: 0;
-  right: 0;
-  margin: 0 48px;
-}
-
-.top-ui {
-  top: 48px;
-}
-
-.bottom-ui {
-  align-items: center;
-  bottom: 100px;
-  height: 100px;
-}
-</style>
+</script>