Style authentication's states

src/components/UserAuthentication.vue

@@ -8,15 +8,37 @@
           hover:text-gray-600
           focus:outline-none
           text-gray-800
-          font-sans font-semibold
+          font-semibold
           p-2
         "
       >
         Authenticate
       </button>
       <div v-if="authenticating">
-        <div v-if="authenticationFailed">
+        <div
+          v-if="authenticationFailed"
+          class="
+            p-1
+            m-2
+            font-semibold
+            bg-red-400
+            ring-2 ring-red-500
+            rounded
+            text-gray-50
+            relative
+          "
+        >
           Authentication failed. Please check your secret token.
+          <XCircle
+            class="
+              absolute
+              bottom-0.5
+              right-0.5
+              stroke-current
+              text-red-600
+              opacity-40
+            "
+          ></XCircle>
         </div>
         <input
           type="text"
@@ -49,7 +71,7 @@
         </span>
       </div>
     </div>
-    <div v-else>Welcome, {{ stateUser.username }}</div>
+    <div v-else class="text-lg ml-1 mb-1">Welcome, {{ stateUser.username }}</div>
   </div>
 </template>