<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('Sign Up') %>
<%- else -%>
Sign Up
<%- end -%>
</h2> <%%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %> <%%= render 'devise/shared/error_messages', resource: resource %> <div class="mb-4"> <%%= f.label :email, class: 'block email optional text-sm font-medium text-gray-600' %> <%%= f.email_field :email, autofocus: true, autocomplete: 'email', 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' %> <%% if @minimum_password_length %> <em>(<%%= @minimum_password_length %> characters minimum)</em> <%% end %> <%%= f.password_field :password, autocomplete: 'new-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> <div class="mb-4"> <%%= f.label :password_confirmation, class: 'block email optional text-sm font-medium text-gray-600' %> <%%= f.password_field :password_confirmation, autocomplete: 'new-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> <%%= f.submit 'Sign Up', 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>