Style upload form and hide when config is uploaded

Author: rogden

src/components/Canvas/Canvas.vue

@@ -1,16 +1,29 @@
 <template>
   <div>
-    <form class="mb-10">
-      <input
-        id="file"
-        type="file"
-        name="file"
-        class="absolute opacity-0 w-0 h-0 overflow-hidden"
-        @change="fileSelected">
-      <label for="file" class="inline-block p-4 bg-blue-400 hover:bg-blue-500 text-white">Upload Tailwind Config</label>
-    </form>
+    <div
+      v-if="!config"
+      style="height: calc(100vh - 63px);"
+      class="flex items-center justify-center">
+      <form
+        class="
+          flex flex-col
+          p-16
+          max-w-sm
+          rounded-lg
+          border-2 border-dashed border-bg-gray-200"
+      >
+        <p class="mb-3 text-gray-600 text-center font-bold">Upload your Tailwind config file</p>
+        <input
+          id="file"
+          type="file"
+          name="file"
+          class="absolute opacity-0 w-0 h-0 overflow-hidden"
+          @change="fileSelected">
+        <label for="file" class="inline-block p-4 bg-blue-400 hover:bg-blue-500 rounded cursor-pointer text-center text-white">Upload Tailwind Config</label>
+      </form>
+    </div>
     <template v-if="config">
-      <div class="flex">
+      <div class="pt-8 flex">
         <nav class="w-56 flex-none px-3 h-full top-0 sticky">
           <h2 class="font-bold text-lg">Sections</h2>
           <a