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 v3.4. It is responsive. It supports dark mode.

Form

Author Anonymous

Tailwind v3.4 2.2k 7

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

Banner with Form

Aitrik Saha

1 year ago

2.1k
Responsive Form2

ABDO-SY

1 year ago

1.8k
Login Form

UI-Templates

1 year ago

1.2k
payment card
A payment card is a type of card issued by a financial institution (like a bank) that allows the cardholder to make financial transactions. These transactions can include purchasing goods and services, withdrawing cash, or transferring money. Here’s a description based on the main types of payment cards:

dev-fab250

1 year ago

1.6k
update user
it is the layout for creating an event

seth dridi

2 years ago

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

R Thapa

3 years ago

18.4k
Sign in form

Simon Scheffer

3 years ago

17k
Login form

Leon Bachmann

3 years ago

14k
tailwind contact form
tailwind contact form

Geoffrey Callaghan

2 years ago

4.1k
Contact us section
Minimal contact us form

Leon Bachmann

3 years ago

13k
Waitlist signup form

Anonymous

2 years ago

5.5k
login
login by : html , css

Hacker Development

1 year ago

2k