검색 구성 요소

카테고리

구성 요소 비밀번호 재설정

비밀번호 재설정

잊어버린 비밀번호를 재설정하는 프로세스

Password Reset 구성 요소

스큐어모픽 스타일로 설계된 Password Reset 구성 요소로, 자연스러운 미학을 위해 흙색을 사용하고 대시보드 애플리케이션을 위해 구조화되었습니다. 다크 모드를 지원하며 반응형입니다.

                <div class="max-w-md mx-auto mt-10 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Reset Your Password</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-4">Please enter your email address to receive a password reset link.</p>
    <form>
        <div class="mb-4">
            <label for="email" class="block text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
            <input type="email" id="email" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-green-400" placeholder="[email protected]" required />
        </div>
        <div class="mb-4">
            <label for="new-password" class="block text-gray-700 dark:text-gray-300 mb-2">New Password</label>
            <input type="password" id="new-password" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-green-400" placeholder="Enter new password" required />
        </div>
        <div class="mb-4">
            <label for="confirm-password" class="block text-gray-700 dark:text-gray-300 mb-2">Confirm Password</label>
            <input type="password" id="confirm-password" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-green-400" placeholder="Re-enter new password" required />
        </div>
        <button type="submit" class="w-full py-3 bg-green-500 hover:bg-green-600 text-white rounded-lg transition duration-200">Reset Password</button>
    </form>
    <div class="mt-4 text-center">
        <p class="text-gray-600 dark:text-gray-400">Remembered your password? <a href="#" class="text-green-500 hover:underline">Log in</a></p>
    </div>
</div>

비밀번호 재설정 구성 요소 Brutalism Complex Analogous 대시보드

대시보드를 위한 브루탈리즘 스타일의 비밀번호 재설정 구성 요소로, 복잡한 레이아웃, 유사한 색 구성표, 응답성 및 다크 모드 지원을 특징으로 합니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-6">
  <div class="w-full max-w-md bg-yellow-300 dark:bg-yellow-700 border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] p-8 space-y-6">
    <h2 class="text-2xl font-bold text-black dark:text-white uppercase border-b-4 border-black dark:border-white pb-4">Reset Password</h2>
    <p class="text-black dark:text-white text-sm font-mono">Enter your email address to receive a password reset link. This action cannot be undone.</p>
    <div class="space-y-4">
      <div>
        <label for="email" class="block text-sm font-bold text-black dark:text-white uppercase mb-2">Email Address</label>
        <input type="email" id="email" class="w-full p-3 border-4 border-black dark:border-white bg-orange-300 dark:bg-orange-700 text-black dark:text-white focus:outline-none focus:ring-0 focus:border-black dark:focus:border-white" placeholder="[email protected]">
      </div>
      <div class="flex items-center">
        <input type="checkbox" id="remember" class="h-5 w-5 text-black dark:text-white border- काले dark:border-white focus:ring-0 rounded-none">
        <label for="remember" class="ml-2 block text-sm text-black dark:text-white font-mono">Remember me (not recommended on shared computers)</label>
      </div>
    </div>
    <button class="w-full bg-red-500 hover:bg-red-700 text-white font-bold py-3 px-4 border-4 border-black dark:border-white shadow-[6px_6px_0_0_#000] dark:shadow-[6px_6px_0_0_#fff] uppercase transition duration-300 ease-in-out transform active:translate-x-1 active:translate-y-1">
      Send Reset Link
    </button>
    <div class="text-center text-sm">
      <a href="#" class="font-bold text-red-700 dark:text-red-300 hover:underline uppercase">Back to Login</a>
    </div>
  </div>
</div>

Password Reset 구성 요소

Tailwind CSS를 사용하여 소셜 미디어 목적을 위해 Neumorphism 스타일, 보색 구성표, 복잡한 복잡성을 사용하는 암호 재설정 구성 요소. 어두운 테마를 지원하는 반응형 디자인.

열다 미리 보기

                <div class="min-h-screen bg-gray-200 dark:bg-gray-800 flex items-center justify-center p-6">
  <div class="w-full max-w-md bg-gray-200 dark:bg-gray-800 rounded-xl shadow-xl p-8 space-y-6 transform transition duration-500 hover:scale-105">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200">Reset Your Password</h2>
    
    <div class="relative">
        <input type="email" id="email" class="block w-full px-4 py-3 rounded-lg bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-inner transition duration-300 peer" placeholder=" ">
        <label for="email" class="absolute top-0 left-3 p-3 text-gray-500 dark:text-gray-400 text-sm transition-all transform duration-300 peer-placeholder-shown:text-base peer-placeholder-shown:top-3 peer-focus:-top-0 peer-focus:text-sm">
            Email Address
        </label>
    </div>

    <div class="relative">
        <input type="password" id="new-password" class="block w-full px-4 py-3 rounded-lg bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-inner transition duration-300 peer" placeholder=" ">
         <label for="new-password" class="absolute top-0 left-3 p-3 text-gray-500 dark:text-gray-400 text-sm transition-all transform duration-300 peer-placeholder-shown:text-base peer-placeholder-shown:top-3 peer-focus:-top-0 peer-focus:text-sm">
            New Password
        </label>
    </div>
    
    <div class="relative">
        <input type="password" id="confirm-password" class="block w-full px-4 py-3 rounded-lg bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-inner transition duration-300 peer" placeholder=" ">
         <label for="confirm-password" class="absolute top-0 left-3 p-3 text-gray-500 dark:text-gray-400 text-sm transition-all transform duration-300 peer-placeholder-shown:text-base peer-placeholder-shown:top-3 peer-focus:-top-0 peer-focus:text-sm">
            Confirm Password
        </label>
    </div>
    
    <button class="w-full py-3 bg-blue-500 text-white font-bold rounded-lg shadow-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 neumorphism-button">
        Reset Password
    </button>
  </div>
</div>

<style>
.neumorphism-button {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}
.dark .neumorphism-button {
    box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #c1c1c1;
}
.shadow-xl {
    box-shadow: 10px 10px 20px #a7a7a7, -10px -10px 20px #ffffff;
}
.dark .shadow-xl {
     box-shadow: 10px 10px 20px #4a4a4a, -10px -10px 20px #c1c1c1;
}
.shadow-inner {
    box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
}
.dark .shadow-inner {
     box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #c1c1c1;
}
</style>

Password Reset 구성 요소

다크 모드를 지원하는 반응형 비밀번호 재설정 구성 요소

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-400 to-purple-600 dark:from-gray-800 dark:to-gray-900">
  <div class="w-full max-w-md p-8 space-y-6 bg-white rounded shadow-lg dark:bg-gray-700">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Reset Password</h2>
    <form class="space-y-4">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Email Address</label>
        <input type="email" id="email" name="email" required class="w-full px-3 py-2 mt-1 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-600 dark:text-white dark:border-gray-500">
      </div>
      <div>
        <button type="submit" class="w-full px-4 py-2 text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800">Send Reset Link</button>
      </div>
    </form>
  </div>
</div>

Tailwind CSS를 사용하여 비즈니스/기업용 레트로/빈티지 디자인, 어스 톤 색 구성표 및 복잡한 복잡성 수준이 있는 암호 재설정 구성 요소. 어두운 테마를 지원하는 반응형 디자인. JavaScript 코드가 필요하지 않으며 Tailwind 클래스가 있는 HTML만 있으면 됩니다. 이미지에는 picsum.photos를 사용하고 아바타에는 randomuser.me 를 사용합니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900">
    <div class="px-8 py-6 mx-4 mt-4 text-left bg-earth-200 dark:bg-earth-800 shadow-lg md:w-1/3 lg:w-1/3 sm:w-1/3 rounded-lg border dark:border-stone-700 border-earth-300">
        <div class="flex justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-20 h-20 text-stone-600 dark:text-stone-400" fill="none" viewBox="0 0 24 24"
                stroke="currentColor">
                <path d="M12 14l9-5-9-5-9 5 9 5z" />
                <path
                    d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M12 14l9-5-9-5-9 5 9 5zm0 7V14" />
            </svg>
        </div>
        <h3 class="text-2xl font-bold text-center text-stone-800 dark:text-stone-200">Reset Password</h3>
        <form action="">
            <div class="mt-4">
                <div>
                    <label class="block text-stone-700 dark:text-stone-300" for="email">Email</label>
                    <input type="text" placeholder="Email" class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-stone-600 dark:focus:ring-stone-400 border-stone-300 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-200"
                        >
                </div>
                <div class="mt-4">
                    <label class="block">
                        <a href="#" class="text-sm text-stone-600 dark:text-stone-400 hover:underline">Forgot Password?</a>
                    </label>
                </div>
                <div class="flex items-baseline justify-between">
                    <button class="px-6 py-2 mt-4 text-white bg-stone-600 dark:bg-stone-400 rounded-lg hover:bg-stone-900 dark:hover:bg-stone-600">Reset</button>
                </div>
            </div>
        </form>
    </div>
</div>

Password Reset 구성 요소

미니멀하고 평평한 디자인의 비밀번호 재설정 구성 요소는 어스 톤, 반응형 디자인, 어두운 테마를 지원하며 블로그 콘텐츠에 맞게 조정됩니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-800 p-4">
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6 text-center">Reset Password</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4 text-center">Enter your email address to receive a link to create a new password.</p>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email Address</label>
                <input type="email" id="email" class="bg-gray-100 dark:bg-gray-700 border rounded-lg w-full h-12 px-4 focus:outline-none focus:ring focus:ring-green-300" required>
            </div>
            <button type="submit" class="w-full bg-green-500 hover:bg-green-400 text-white font-bold py-2 rounded-lg transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-300">Send Reset Link</button>
        </form>
        <div class="mt-6 text-center">
            <p class="text-gray-600 dark:text-gray-400">Remembered your password? <a href="#" class="text-green-500 hover:underline">Login here</a></p>
        </div>
    </div>
</div>

Password Reset 구성 요소

Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원하는 미니멀리스트 비밀번호 재설정 구성 요소입니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 shadow-md rounded-lg p-8 w-96">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center">Reset Password</h2>
        <p class="text-gray-600 dark:text-gray-400 text-center mb-6">Please enter your email address to receive a password reset link.</p>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input type="email" id="email" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="[email protected]" required>
            </div>
            <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Send Reset Link</button>
        </form>
        <div class="mt-4 text-center">
            <p class="text-gray-500 dark:text-gray-400">Remembered your password? <a href="#" class="text-blue-500 hover:underline">Login</a></p>
        </div>
    </div>
</div>

Brutalism 디자인의 암호 재설정 구성 요소

Brutalism 디자인, 반응형 및 어두운 테마를 지원하는 암호 재설정 구성 요소

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-none shadow-none border-4 border-black dark:border-white max-w-md w-full">
    <h2 class="text-2xl font-bold text-black dark:text-white mb-6 text-center tracking-tighter">Reset Your Password</h2>
    <form>
      <div class="mb-4">
        <label for="email" class="block text-sm font-bold text-black dark:text-white mb-2">Email Address</label>
        <input type="email" id="email" class="w-full px-3 py-2 border-4 border-black dark:border-white rounded-none bg-gray-200 dark:bg-gray-700 text-black dark:text-white focus:outline-none focus:border-black dark:focus:border-white" required>
      </div>
      <div class="mb-6">
        <button type="submit" class="w-full bg-black dark:bg-white text-white dark:text-black font-bold py-2 px-4 border-4 border-black dark:border-white rounded-none hover:bg-gray-800 dark:hover:bg-gray-200 transition duration-0 ease-linear">Send Reset Link</button>
      </div>
    </form>
    <div class="text-center">
      <p class="text-sm">
        <a href="#" class="text-black dark:text-white hover:underline font-bold">Remember your password?</a>
      </p>
    </div>
  </div>
</div>

Password Reset 구성 요소

Skeuomorphism 디자인, 반응형 효과 및 어두운 테마 지원이 있는 암호 재설정 구성 요소.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="p-8 bg-white dark:bg-gray-800 rounded-xl shadow-neumorphic dark:shadow-neumorphic-dark w-full max-w-md">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Reset Password</h2>
    <form>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email Address</label>
        <input type="email" id="email" class="shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline bg-gray-200 dark:bg-gray-700" placeholder="Enter your email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">New Password</label>
        <input type="password" id="password" class="shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline bg-gray-200 dark:bg-gray-700" placeholder="Enter your new password">
      </div>
      <div class="mb-6">
        <label for="confirm-password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Confirm New Password</label>
        <input type="password" id="confirm-password" class="shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline bg-gray-200 dark:bg-gray-700" placeholder="Confirm your new password">
      </div>
      <div class="flex items-center justify-between">
        <button type="button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline shadow-neumorphic-pressed dark:shadow-neumorphic-pressed-dark">
          Reset Password
        </button>
      </div>
    </form>
  </div>
</div>

<style>
  .shadow-neumorphic {
    box-shadow: 5px 5px 10px #cbced1, -5px -5px 10px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 5px 5px 10px #1a202c, -5px -5px 10px #2d3748;
  }

  .shadow-inner-neumorphic {
    box-shadow: inset 5px 5px 10px #cbced1, inset -5px -5px 10px #ffffff;
  }

  .dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 5px 5px 10px #1a202c, inset -5px -5px 10px #2d3748;
  }

    .shadow-neumorphic-pressed {
    box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
  }

  .dark .shadow-neumorphic-pressed-dark {
    box-shadow: inset 5px 5px 10px #1a202c, inset -5px -5px 10px #2d3748;
  }
</style>

Password Reset 구성 요소

Neumorphism 디자인, 다크 모드 지원 및 JavaScript가 없는 반응형 비밀번호 재설정 구성 요소입니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center bg-gray-200 dark:bg-gray-800 p-6">
  <div class="max-w-sm w-full bg-gray-200 dark:bg-gray-800 p-8 rounded-xl shadow-neumorphic dark:shadow-neumorphic-dark">
    <h2 class="text-2xl font-bold text-center text-gray-700 dark:text-gray-200 mb-6">Reset Password</h2>
    <form>
      <div class="mb-6">
        <label for="email" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">Email Address</label>
        <input type="email" id="email" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 text-gray-700 dark:text-gray-200 shadow-neumorphic-input dark:shadow-neumorphic-input-dark" placeholder="Enter your email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">New Password</label>
        <input type="password" id="password" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 text-gray-700 dark:text-gray-200 shadow-neumorphic-input dark:shadow-neumorphic-input-dark" placeholder="Enter new password">
      </div>
      <div class="mb-6">
        <label for="confirm-password" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">Confirm New Password</label>
        <input type="password" id="confirm-password" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 text-gray-700 dark:text-gray-200 shadow-neumorphic-input dark:shadow-neumorphic-input-dark" placeholder="Confirm new password">
      </div>
      <button type="submit" class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-600 dark:focus:ring-opacity-50 shadow-neumorphic-button dark:shadow-neumorphic-button-dark">
        Reset Password
      </button>
    </form>
  </div>
</div>

<style>
  .shadow-neumorphic {
    box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 5px 5px 10px #717171, -5px -5px 10px #999999;
  }
  .shadow-neumorphic-input {
    box-shadow: inset 3px 3px 5px #bebebe, inset -3px -3px 5px #ffffff;
  }
  .dark .shadow-neumorphic-input-dark {
    box-shadow: inset 3px 3px 5px #717171, inset -3px -3px 5px #999999;
  }
  .shadow-neumorphic-button {
    box-shadow: 3px 3px 7px #bebebe, -3px -3px 7px #ffffff;
  }
    .dark .shadow-neumorphic-button-dark {
    box-shadow: 3px 3px 7px #717171, -3px -3px 7px #999999;
  }
</style>