Devise Tailwind login page before refactoring

new.html.erb

<main class="px-5 md:my-8 md:px-8 xl:px-20 py-16 md:py-20">
  <div class="flex flex-col items-center">
    <h2 class="text-3xl font-bold text-transparent
    bg-clip-text bg-gradient-to-br text-transparent
    bg-clip-text bg-gradient-to-br from-pink-500
    to-blue-700 filter drop-shadow">Product Name</h2>
    <h2 class="py-6">Log in to Product</h2>

    <div class="sm:mx-auto sm:w-full sm:max-w-md mx-auto w-full">
      <div class="py-8 px-4 sm:shadow sm:rounded-lg px-10">
        <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
          <div class="field">
            <%= f.label :email, class: "text-base font-medium text-gray-700" %><br />
            <%= f.email_field :email, autofocus: true, autocomplete: "email",
                              class: 'border-gray-100 focus:ring-2 block w-full text-gray-700 rounded pl-3.5 pr-3.5 md:h-12 h-10 border-gray-400'
            %>
          </div>

          <div class="field mt-4">
            <%= f.label :password, class: 'text-base font-medium text-gray-700' %><br />
            <%= f.password_field :password, autocomplete: "current-password",
                              class: 'border-gray-100 focus:ring-2 block w-full text-gray-700 rounded pl-3.5 pr-3.5 md:h-12 h-10 border-gray-400'
            %>
          </div>

          <% if devise_mapping.rememberable? %>
            <div class="field mt-4">
              <%= f.check_box :remember_me %>
              <%= f.label :remember_me %>
            </div>
          <% end %>

          <div class="actions my-4">
            <%= f.submit "Log 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-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500' %>
          </div>
        <% end %>

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

refactored_new.html.erb

<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
  <div class="field">
    <%= f.label :email, class: "text-md font-medium text-gray-700" %>
    <%= f.email_field :email, autofocus: true, autocomplete: "email",
                      class: 'focus:ring-primary-100 focus:border-primary-300 border-gray-100 focus:ring-2 block w-full text-gray-700 rounded pl-3.5 pr-3.5 md:responsive-body-lg md:h-12 body h-10 border-gray-400'
    %>
  </div>

  <div class="field pt-4">
    <%= f.label :password, class: 'field-label' %>
    <%= f.password_field :password, autocomplete: "current-password",
                         class: 'field-input'
    %>
  </div>

  <% if devise_mapping.rememberable? %>
    <div class="field mt-4">
      <%= f.check_box :remember_me %>
      <%= f.label :remember_me, class: 'field-label' %>
    </div>
  <% end %>

  <div class="actions my-4">
    <%= f.submit "Log in", class: 'btn-primary' %>
  </div>
<% end %>