<div class=“md:mx-auto md:max-w-md overflow-hidden mx-0”>

<div class="shadow-md rounded px-8 pt-6 pb-8 mb-4 flex flex-col justify-center bg-gray-50">
  <h2 class="text-center text-xl text-black">

<%- if options -%>

<%%= title('Log In') %>

<%- else -%>

Log In

<%- end -%>

  </h2>

  <%%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
    <div class="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 string' %>
    </div>

    <div class="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 string' %>
    </div>

    <%% if devise_mapping.rememberable? %>
      <div class="mb-4 flex items-start boolean optional user_remember_me">
        <div class="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' %>
        </div>
        <div class="ml-3 text-sm">
          <%%= f.label :remember_me, class: 'block boolean optional text-sm font-medium text-gray-600' %>
        </div>
      </div>
    <%% end %>
    <%%= 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' %>
  <%% end %>
  <%%= render 'devise/shared/links' %>
</div>

</div>