<div class="mx-auto mt-8 max-w-md rounded-lg bg-white p-6 shadow-md">
  <h2 class="mb-6 text-2xl font-bold text-slate-900">Sign In</h2>

  <%= form_for(
        resource,
        as: resource_name,
        url: session_path(resource_name),
        html: {
          class: "space-y-4",
        },
      ) do |f| %>
    <div class="field">
      <%= f.label :email, class: "block text-sm font-medium text-slate-700" %>
      <%= f.email_field :email,
                        autofocus: true,
                        autocomplete: "email",
                        class:
                          "mt-1 block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500" %>
    </div>

    <div class="field">
      <%= f.label :password, class: "block text-sm font-medium text-slate-700" %>
      <%= f.password_field :password,
                           autocomplete: "current-password",
                           class:
                             "mt-1 block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500" %>
    </div>

    <% if devise_mapping.rememberable? %>
      <div class="field flex items-center">
        <%= f.check_box :remember_me,
                        class:
                          "h-4 w-4 rounded border-slate-300 text-slate-600 focus:ring-slate-500" %>
        <%= f.label :remember_me, class: "ml-2 block text-sm text-slate-700" %>
      </div>
    <% end %>

    <div class="actions">
      <%= f.submit "Sign in",
                   class:
                     "w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-slate-600 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500" %>
    </div>
  <% end %>

  <div class="mt-6 text-center text-sm">
    <%= render "devise/shared/links" %>
  </div>
</div>
