%div{class: 'md:mx-auto md:max-w-md overflow-hidden mx-0'}

.shadow-md.rounded.px-8.pt-6.pb-8.mb-4.flex.flex-col.justify-center.bg-gray-50

<%- if options -%>

%h2.text-center.text-xl.text-black= title('Log In')

<%- else -%>

%h2.text-center.text-xl.text-black Log In

<%- end -%>

= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
  .mb-4
    = f.label :email, class: 'block email optional text-sm font-medium text-gray-600'
    = f.email_field :email, autofocus: true, class: 'shadow appearance-none border border-gray-300 rounded w-full py-2 px-3 bg-white focus:outline-none focus:ring-0 focus:border-blue-500 text-gray-400 leading-6 transition-colors duration-200 ease-in-out'

  .mb-4
    = f.label :password, class: 'block email optional text-sm font-medium text-gray-600'
    = f.password_field :password, class: 'shadow appearance-none border border-gray-300 rounded w-full py-2 px-3 bg-white focus:outline-none focus:ring-0 focus:border-blue-500 text-gray-400 leading-6 transition-colors duration-200 ease-in-out'

  - if devise_mapping.rememberable?
    .mb-4.flex.items-start.boolean.optional.user_remember_me
      .flex.items-center.h-5
        = f.check_box :remember_me, class: 'focus:ring-2 focus:ring-indigo-500:focus ring-offset-2 h-4 w-4 text-indigo-600 border-gray-300 rounded boolean optional'
      .ml-3.text-sm
        = f.label :remember_me, class: 'block boolean optional text-sm font-medium text-gray-600'
  = f.submit 'Log in', class: 'my-2 bg-blue-500 hover:bg-blue-700 text-white font-bold text-sm py-2 px-4 rounded w-full'
= render 'devise/shared/links'