new.html.erb

<div class="container mx-auto px-4 py-8">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 shadow rounded-lg p-6">
    <h1 class="text-2xl font-bold mb-6 dark:text-white">Forgot your password?</h1>

    <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
      <%= render "devise/shared/error_messages", resource: resource %>

      <div class="mb-4">
        <%= f.label :email, class: "block text-gray-700 dark:text-gray-300 mb-2" %>
        <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white" %>
      </div>

      <div class="mb-6">
        <%= f.submit "Send me reset password instructions", class: "w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800" %>
      </div>
    <% end %>

    <%= render "devise/shared/links" %>
  </div>
</div>