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

Feedback Form

JaxStone

3 years ago

16k
Feedback Form
Feedback Form with a map

Andreas Wagner

2 years ago

9k
Simple contact us form

Geoffrey Callaghan

2 years ago

8k
Register form

Maxim

1 year ago

2.1k
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Hamza Atig

1 year ago

1.7k
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

ORGIN_DREAMS

1 year ago

1.6k
Glassmorphism form

Sophia Baker

3 years ago

19.3k
Amazing 3D Login and Registiration Aniamation Form
create a stunning 3D animated background with floating geometric shapes, particle effects, and interactive elements using React, Three.js, and Tailwind CSS. This will be fully responsive and visually captivating.

Nicole Shalom

1 year ago

1.7k
Multi-Step Form with Progress Indicator
reusable "Multi-Step Form with Progress Indicator" component built with HTML, CSS, and Tailwind CSS. It’s a practical component for forms like signups, surveys, or checkout processes.

Ayyamperumal S

1 year ago

2.6k
Contact us form template

Lukas Müller

3 years ago

10k
Login form

Leon Bachmann

3 years ago

14k
Magic Link Authentication

JUGENDRA GANGWAR

11 hours ago

5