flex around devise, also reconfirmable

app/views/devise/passwords/new.html.haml

@@ -1,10 +1,20 @@
-%h2 Forgot your password?
-= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f|
-  = render "devise/shared/error_messages", resource: resource
-  .field
-    = f.label :email
-    %br/
-    = f.email_field :email, autofocus: true, autocomplete: "email"
-  .actions
-    = f.submit "Send me reset password instructions"
-= render "devise/shared/links"
+.flex.justify-center
+  .w-full.max-w-xs
+    %h1.font-hairline.mb-6.text-center Forgot your password?
+    = form_for(resource,                                              |
+      as: resource_name,                                              |
+      url: password_path(resource_name),                              |
+      html: {                                                         |
+              method: :post,                                          |
+              class: "bg-white mb-4 px-8 pt-6 pb-8 rounded shadow-md" |
+      }) do |f|                                                       |
+      = devise_error_messages!
+      .mb-4
+        = f.label :email, class: "block font-bold mb-2 text-gray-700 text-sm"
+        = f.email_field :email, autofocus: true, autocomplete: "email",                                                                       |
+          class: "appearance-none border leading-tight focus:outline-none px-3 py-2 rounded shadow focus:shadow-outline text-gray-700 w-full" |
+      .mb-4
+        = f.submit "Send Password Reset Info",                                                                                                |
+          class: "button bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full" |
+      = render "devise/shared/links"
+    = render "devise/shared/form_footer"