style new sign in form

app/controllers/sessions_controller.rb

@@ -0,0 +1,3 @@
+class SessionsController < Devise::SessionsController
+  layout 'tailwind/landing'
+end

app/views/devise/sessions/_form.html.erb

@@ -1,33 +1,27 @@
+<div class="text-black text-center mb-3 font-bold">
+  <small>Sign in with email</small>
+</div>
 <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
-
-  <div class="field">
-    <%= f.label :email %><br />
-    <%= f.email_field :email, autofocus: true %>
+  <div class="relative w-full mb-3">
+    <label class="block uppercase text-blueGray-600 text-xs font-bold mb-2" for="grid-password">Email</label>
+    <%= f.email_field :email, autofocus: true, placeholder: 'Email', class: 'border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150' %>
   </div>
-
-  <div class="field">
-    <%= f.label :password %><br />
-    <%= f.password_field :password, autocomplete: "off" %>
+  <div class="relative w-full mb-3">
+    <label class="block uppercase text-blueGray-600 text-xs font-bold mb-2" for="grid-password">Password</label>
+    <%= f.password_field :password, autocomplete: "off", placeholder: 'Password', class: 'border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150' %>
   </div>
+  <div>
+    <%= f.label :remember_me, class: 'inline-flex items-center cursor-pointer' do %>
+      <input id="customCheckLogin" type="checkbox" class="form-checkbox border-0 rounded text-blueGray-700 ml-1 w-5 h-5 ease-linear transition-all duration-150"><span class="ml-2 text-sm font-semibold text-blueGray-600">
+        Remember me
+      </span>
+    <% end %>
+  </div>
+  <div class="text-center mt-6">
+    <%= f.submit 'Sign In', class: 'bg-notebook-blue text-white text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full ease-linear transition-all duration-150' %>
+  </div>
+  <div class="text-center mt-4 text-sm hover:text-notebook-blue">
+    <%= link_to 'Forgot your password?', new_user_password_path, class: 'text-notebook-blue hover:border-notebook-blue border-b-2' %>
 
-  <div class="spacer">&nbsp;</div>
-
-  <div class="actions center">
-    <div class="col s6">
-      <% if devise_mapping.rememberable? -%>
-        <%= f.label :remember_me do %>
-          <%= f.check_box :remember_me %>
-          <span>Remember me</span>
-        <% end %>
-      <% end -%>
-    </div>
-    <div class="col s6">
-      <%= f.submit "Log in", class: 'btn blue' %>
-    </div>
-
-    <p class="center">
-      <br />
-      <%= render "devise/shared/links" %>
-    </p>
   </div>
 <% end %>

app/views/devise/sessions/new.html.erb

@@ -1,4 +1,51 @@
-<div class="row" style="margin-top: 5%">
+<section class="bg-blueGray">
+  <div class="w-full lg:w-4/12 px-4 mx-auto pt-6">
+    <div class="relative flex flex-col bg-white min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-200 border-0">
+      <div class="rounded-t mb-0 px-6 py-6">
+        <%= image_tag 'logos/both-small.webp', class: 'w-full' %>
+      </div>
+
+      <div class="rounded-t mb-0 px-6 py-6 hidden">
+        <div class="text-center mb-3">
+          <h6 class="text-blueGray-500 text-sm font-bold">
+            Sign in with
+          </h6>
+        </div>
+        <div class="btn-wrapper text-center">
+          <button class="bg-white active:bg-blueGray-50 text-blueGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-2 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150" type="button">
+            <img alt="..." class="w-5 mr-1" src="https://demos.creative-tim.com/notus-js/assets/img/github.svg">
+            Github
+          </button>
+          <button class="bg-white active:bg-blueGray-50 text-blueGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150" type="button">
+            <img alt="..." class="w-5 mr-1" src="https://demos.creative-tim.com/notus-js/assets/img/google.svg">
+            Google
+          </button>
+
+        </div>
+        <hr class="mt-6 border-b-1 border-blueGray-300">
+      </div>
+
+      <div class="flex-auto px-4 lg:px-10 py-10 pt-0">
+        <%= render 'devise/sessions/form' %>
+      </div>
+    </div>
+  </div>
+  <footer class="relative pt-8 pb-6 mt-2">
+    <div class="container mx-auto px-2">
+      <div class="flex flex-wrap items-center md:justify-between justify-center">
+        <div class="w-full md:w-6/12 px-4 mx-auto text-center">
+          <div class="text-sm text-blueGray-500 font-semibold py-1">
+            Don't have an account?
+            <%= link_to 'Sign up for free.', new_user_registration_path, class: 'text-notebook-blue hover:border-notebook-blue border-b-2' %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </footer>
+</section>
+
+
+<div class="row hidden" style="margin-top: 5%">
   <div class="col s12 m6 offset-m3">
     <div class="card">
       <div style="padding: 0 2em; padding-top: 1em">

config/routes.rb

@@ -34,7 +34,7 @@ Rails.application.routes.draw do
   post 'customization/toggle_content_type'
 
   # User-centric stuff
-  devise_for :users, :controllers => { registrations: 'registrations' }
+  devise_for :users, :controllers => { registrations: 'registrations', sessions: 'sessions' }
   resources :users do
     devise_scope :user do
       get 'preferences',  to: 'registrations#preferences'