Home
Anonymous
Forgot password form

Forgot password form

Forked from> @steven-kuhn/forgot-password-form

Useful form for sending password reset link

This tailwind example is contributed by Anonymous, on 11-Nov-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Form

Author Anonymous

782

Fork Fullscreen

<main id="content" role="main" class="w-full  max-w-md mx-auto p-6">
    <div class="mt-7 bg-white  rounded-xl shadow-lg dark:bg-gray-800 dark:border-[#d39430] border-2 border-[#d39430]">
      <div class="p-4 sm:p-7">
        <div class="text-center">
          <h1 class="block text-2xl font-bold text-gray-800 dark:text-white">Esqueceu sua senha?</h1>
          <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
            Lembra da sua senha?
            <a class="text-blue-600 decoration-2 hover:underline font-medium" href="#">
              Faça login aqui
            </a>
          </p>
        </div>

<div class="mt-5">
          <form>
            <div class="grid gap-y-4">
              <div>
                <label for="email" class="block text-sm font-bold ml-1 mb-2 dark:text-white">Endereço de email</label>
                <div class="relative">
                  <input type="email" id="email" name="email" class="py-3 px-4 block w-full border-2 border-gray-200 rounded-md text-sm focus:border-[#d39430] focus:ring-[#d39430] shadow-sm" required aria-describedby="email-error">
                </div>
                <p class="hidden text-xs text-red-600 mt-2" id="email-error">Inclua um endereço de e-mail válido para que possamos entrar em contato com você</p>
              </div>
              <button type="submit" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-[#d39430] text-white hover:bg-[#b07827] focus:outline-none focus:ring-2 focus:ring-[#d39430] focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">Redefinir senha</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </main>

Related Examples

Responsive Classes List Table with Edit and Delete buttons using Tailwind CSS
This responsive classes list table is built using Tailwind CSS and features: - A clean layout with a header displaying column titles. - Action buttons for editing and deleting entries. - Responsive design that adapts to various screen sizes. - Easy customization options to fit your project's needs.

Author:
Anum Shahana

6 months ago

1.8k
Profile Form
Progressive Profile Form

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

3.9k
Login Form
Admin Login Form

Author:
Khalid

1 year ago

1.7k
Responsive contact us section

Author:
Geoffrey Callaghan

1 year ago

6.8k
Sign in form
simple full-height login form

Author:
Lukas Müller

2 years ago

8.8k
Sign in form

Author:
Simon Scheffer

2 years ago

14.8k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

3 weeks ago

49
Facebook Login page
Facebook Login page

Author:
Rehman Arshad

10 months ago

2.1k
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Author:
Anonymous

1 month ago

56
Sign up for newsletter form

Author:
Amit Pachange

1 year ago

11.4k
Form Layouts

Author:
Anonymous

1 year ago

2.7k
Contact Form for fabform.io
Contact form that uses fabform.io

Author:
Ho O

4 months ago

219

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components