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

form3

ABDO-SY

1 year ago

2.1k
Sign up for newsletter form

Amit Pachange

3 years ago

12.7k
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.

Anum Shahana

2 years ago

4.1k
Tailwind CSS Radio Button Cards

Prashant

4 years ago

13.1k
Registration form

Juan D. Cortorreal

10 months ago

644
Minimal Ghost Login Form

JUGENDRA GANGWAR

4 days ago

4
Simple contact us form

Lukas Müller

3 years ago

12.7k
Login form

Rajesh Maheshwari

1 year ago

2.6k
Checkout form
A versatile checkout form component for users to provide shipping and payment information. It has fields for first name, last name, address, city, state, ZIP code, card number, expiration date, and CVV.

Anonymous

3 years ago

13.6k
Contact us page template
full page fancy contact us page

Lukas Müller

3 years ago

17.8k
Forgot password form

ariaw

11 months ago

793
Tailwind CSS Contact Form
A clean contact form with a supporting image, built using Tailwind CSS by ReadymadeUI. Browse more free UI components and templates at readymadeui.com.

ReadyMadeUI

10 months ago

655