move form class names to outer component

Author: Gareth Redfern

src/components/AuthUser.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-5 bg-white border rounded shadow">
+  <div>
     <ul>
       <li class="mb-1 font-bold">{{ authUser.name }}</li>
       <li>Email: {{ authUser.email }}</li>

src/components/AuthUserForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <form @submit.prevent="updateUser" class="p-5 bg-white border rounded shadow">
+  <form @submit.prevent="updateUser">
     <BaseInput
       type="text"
       label="Name"

src/components/UpdatePassword.vue

@@ -1,8 +1,5 @@
 <template>
-  <form
-    @submit.prevent="updatePassword"
-    class="p-5 bg-white border rounded shadow"
-  >
+  <form @submit.prevent="updatePassword">
     <div class="mb-2">
       <label for="password" class="text-sm text-gray-500"
         >Current Password</label

src/views/User.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="py-5">
     <div class="grid gap-10 md:grid-cols-3">
-      <AuthUser />
-      <AuthUserForm />
-      <UpdatePassword />
+      <AuthUser class="p-5 bg-white border rounded shadow" />
+      <AuthUserForm class="p-5 bg-white border rounded shadow" />
+      <UpdatePassword class="p-5 bg-white border rounded shadow" />
     </div>
   </div>
 </template>