style login page

src/app/login/page.tsx

@@ -49,7 +49,7 @@ export default function LoginForm() {
 		<>
 			{submitted ? <p>Logging in...</p> :
 				<Form {...form}>
-					<form onSubmit={onSubmit}>
+					<form onSubmit={onSubmit} className="mt-20 flex flex-col items-center space-y-6">
 						<FormField
 							control={form.control}
 							name="email"
@@ -76,7 +76,7 @@ export default function LoginForm() {
 								</FormItem>
 							)}
 						></FormField>
-						<Button type="submit">SUBMIT</Button>
+						<Button type="submit" className="mt-4">SUBMIT</Button>
 					</form>
 				</Form>
 			}

src/app/tailwind.css

@@ -773,6 +773,10 @@ body {
   margin-top: 1.5rem;
 }
 
+.mt-20 {
+  margin-top: 5rem;
+}
+
 .block {
   display: block;
 }
@@ -875,6 +879,14 @@ body {
   height: 100vh;
 }
 
+.h-full {
+  height: 100%;
+}
+
+.h-5\/6 {
+  height: 83.333333%;
+}
+
 .max-h-96 {
   max-height: 24rem;
 }
@@ -1204,6 +1216,12 @@ body {
   margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
 }
 
+.space-y-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
+
 .justify-self-end {
   justify-self: end;
 }