搜索组件

类别

组件密码重置

密码重置

重置忘记密码的过程

密码重置组件

响应式密码重置组件，具有“纸张/印刷灵感”设计、“糖果/甜蜜的颜色”和深色模式支持，适用于工业和制造公司。

                <div class="min-h-screen bg-pink-100 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform perspective-1000 -rotate-x-1 sm:-rotate-x-2 -skew-y-0.5 sm:-skew-y-1 transition-all duration-300 ease-in-out
              border-4 border-dashed border-pink-300 dark:border-pink-600
              flex flex-col items-center p-8 sm:p-10 relative">
    
    <!-- Paper-like background texture (subtle) -->
    <div class="absolute inset-0 bg-repeat opacity-10 dark:opacity-5" style="background-image: url('data:image/svg+xml;utf8,<svg viewBox=\'0 0 10 10\' xmlns=\'http://www.w3.org/2000/svg\'><circle cx=\'1\' cy=\'1\' r=\'.5\' fill=\'%23ccc\'/><circle cx=\'6\' cy=\'6\' r=\'.5\' fill=\'%23ccc\'/></svg>'); background-size: 10px 10px;"></div>

    <!-- Page Curl Effect (top right) -->
    <div class="absolute top-0 right-0 w-24 h-24 rounded-bl-full bg-pink-200 dark:bg-pink-700 opacity-70" style="clip-path: polygon(0 0, 100% 0, 100% 100%); transform: translate(25%, -25%) rotate(45deg);")></div>
    
    <div class="relative z-10 w-full">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-pink-700 dark:text-pink-300 mb-4 text-center tracking-tight leading-tight" style="font-family: 'Georgia', serif;">
        Reset Password
      </h2>
      <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 mb-8 text-center leading-relaxed font-light">
        Enter your new password below. Make sure it's strong and unique.
      </p>

      <form class="space-y-6">
        <div>
          <label for="new-password" class="block text-sm font-medium text-pink-700 dark:text-pink-300 mb-1">
            New Password
          </label>
          <div class="relative">
            <input
              type="password"
              id="new-password"
              name="new-password"
              required
              class="appearance-none block w-full px-4 py-3 border border-pink-300 dark:border-pink-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500
                     focus:outline-none focus:ring-2 focus:ring-mint-500 focus:border-mint-500
                     bg-pink-50 dark:bg-gray-700 text-gray-900 dark:text-white sm:text-base"
              placeholder="••••••••"
            >
            <span class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 dark:text-gray-400">
              <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
            </span>
          </div>
        </div>

        <div>
          <label for="confirm-password" class="block text-sm font-medium text-pink-700 dark:text-pink-300 mb-1">
            Confirm Password
          </label>
          <div class="relative">
            <input
              type="password"
              id="confirm-password"
              name="confirm-password"
              required
              class="appearance-none block w-full px-4 py-3 border border-pink-300 dark:border-pink-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500
                     focus:outline-none focus:ring-2 focus:ring-mint-500 focus:border-mint-500
                     bg-pink-50 dark:bg-gray-700 text-gray-900 dark:text-white sm:text-base"
              placeholder="••••••••"
            >
            <span class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 dark:text-gray-400">
              <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
            </span>
          </div>
        </div>

        <div>
          <button
            type="submit"
            class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-semibold
                   bg-mint-500 hover:bg-mint-600 dark:bg-mint-600 dark:hover:bg-mint-700 text-white
                   focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-mint-500 dark:focus:ring-offset-gray-800
                   transform hover:scale-105 transition-all duration-200 ease-in-out
                   tracking-wide"
          >
            Reset Password
          </button>
        </div>
      </form>

      <p class="mt-8 text-center text-sm text-gray-500 dark:text-gray-400">
        <a href="#" class="font-medium text-pink-600 hover:text-pink-800 dark:text-pink-400 dark:hover:text-pink-200 transition-colors duration-200">
          Go back to login
        </a>
      </p>
    </div>
  </div>
</div>

密码重置组件

一个复杂的响应式密码重置组件，具有拟物化设计风格、相似的配色方案（绿色/蓝色）和深色模式支持，适用于加密货币/区块链应用程序。

打开预览

                <div class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="max-w-md w-full rounded-2xl shadow-xl p-8 bg-gradient-to-br from-green-50 to-blue-50 dark:from-gray-800 dark:to-gray-950 border border-green-200 dark:border-gray-700
              transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl
              relative overflow-hidden
              before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-green-100 before:to-blue-100 dark:before:from-gray-700 dark:before:to-gray-900 before:opacity-0 before:blur-sm before:transition-opacity before:duration-500
              hover:before:opacity-30">
    
    <div class="absolute inset-0 z-0 opacity-10 dark:opacity-5" style="background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%2338A169" fill-opacity="0.4"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>

    <div class="relative z-10">
      <div class="flex justify-center mb-6">
        <svg class="w-16 h-16 text-green-600 dark:text-green-400 drop-shadow-lg" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
        </svg>
      </div>
      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-gray-100 text-center mb-4 leading-tight drop-shadow-md tracking-wider">
        <span class="text-green-700 dark:text-green-500">Access</span> Recovery
      </h2>
      <p class="text-gray-600 dark:text-gray-300 text-center mb-8 text-lg leading-relaxed">
        Securely restore your account access with advanced encryption. 
      </p>

      <form class="space-y-6">
        <div class="relative group">
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2 skeleton-label">
            Registered Email Address
          </label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400 dark:text-gray-500 transform transition-transform group-hover:scale-110" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.5a2.5 2.5 0 10-5 0V12"/>
              </svg>
            </div>
            <input type="email" id="email" name="email" autocomplete="email" required
                   class="block w-full pl-10 pr-3 py-3 rounded-xl border border-blue-300 dark:border-gray-600 shadow-inner 
                          bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500
                          focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent
                          hover:border-blue-400 dark:hover:border-gray-500 transition duration-300
                          neumorphic-input">
          </div>
          <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Enter the email associated with your account.</p>
        </div>

        <div class="relative group">
          <label for="token" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2 skeleton-label">
            Recovery Token (Optional)
          </label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400 dark:text-gray-500 transform transition-transform group-hover:scale-110" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2v5l-3 3H7a2 2 0 01-2-2V9a2 2 0 012-2h5a2 2 0 012 2z"/>
              </svg>
            </div>
            <input type="text" id="token" name="token" placeholder="e.g., 2FA code or backup key"
                   class="block w-full pl-10 pr-3 py-3 rounded-xl border border-blue-300 dark:border-gray-600 shadow-inner
                          bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500
                          focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent
                          hover:border-blue-400 dark:hover:border-gray-500 transition duration-300
                          neumorphic-input">
          </div>
          <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
            If you have a 2FA code or backup key, enter it here for faster recovery.
          </p>
        </div>

        <button type="submit"
                class="w-full flex justify-center py-3 px-4 border border-transparent rounded-xl shadow-lg text-lg font-semibold
                       text-white bg-gradient-to-r from-green-500 to-blue-600
                       dark:from-green-600 dark:to-blue-700
                       hover:from-green-600 hover:to-blue-700 dark:hover:from-green-700 dark:hover:to-blue-800
                       focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-offset-gray-900
                       transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 active:scale-95
                       group relative overflow-hidden neumorphic-button">
          <span class="absolute inset-0 bg-black opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
          <span class="relative flex items-center justify-center">
            <svg class="-ml-1 mr-3 h-6 w-6 transform rotate-0 group-hover:rotate-12 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.007 12.007 0 002.944 12c.071 1.603.359 3.165.848 4.656.49.983 1.102 1.884 1.848 2.685.746.801 1.63 1.482 2.607 2.006A9.954 9.954 0 0012 22.955c1.196-.067 2.378-.344 3.498-.795.977-.424 1.861-1.105 2.607-1.906.746-.801 1.358-1.702 1.848-2.685.489-1.491.777-3.053.848-4.656a12.007 12.007 0 00-.05-9.056z"/>
            </svg>
            Initiate Recovery
          </span>
        </button>
      </form>

      <div class="mt-8 text-center text-sm">
        <p class="mb-2 text-gray-600 dark:text-gray-300">Having trouble?</p>
        <a href="#" class="font-medium text-green-700 hover:text-green-500 dark:text-green-400 dark:hover:text-green-300
                           transform transition-transform duration-200 hover:scale-[1.03] active:scale-95
                           block py-2 rounded-lg bg-green-50 dark:bg-gray-800 border border-green-200 dark:border-gray-700
                           shadow-sm hover:shadow-md">
          Contact Support for Manual Review
        </a>
      </div>

      <div class="mt-10 pt-6 border-t border-green-200 dark:border-gray-700 text-center">
        <p class="text-xs text-gray-500 dark:text-gray-400">
          Your security is our top priority. All recovery processes are encrypted.
        </p>
        <div class="flex justify-center flex-wrap gap-x-4 gap-y-2 mt-4">
          <span class="text-xs text-gray-400 dark:text-gray-500 flex items-center">
            <svg class="w-4 h-4 mr-1 text-blue-500 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.007 12.007 0 002.944 12c.071 1.603.359 3.165.848 4.656.49.983 1.102 1.884 1.848 2.685.746.801 1.63 1.482 2.607 2.006A9.954 9.954 0 0012 22.955c1.196-.067 2.378-.344 3.498-.795.977-.424 1.861-1.105 2.607-1.906.746-.801 1.358-1.702 1.848-2.685.489-1.491.777-3.053.848-4.656a12.007 12.007 0 00-.05-9.056z"></path></svg>
            Security First
          </span>
          <span class="text-xs text-gray-400 dark:text-gray-500 flex items-center">
            <svg class="w-4 h-4 mr-1 text-green-500 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18a2 2 0 002-2V7a2 2 0 00-2-2H3a2 2 0 00-2 2v12a2 2 0 002 2zM10 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z"></path></svg>
            Blockchain Integrated
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
/* Base Skeuomorphism styles for neumorphic effect */
.neumorphic-input {
  box-shadow: inset 3px 3px 6px #bfcfe7, inset -3px -3px 6px #ffffff;
}
.dark .neumorphic-input {
  box-shadow: inset 3px 3px 6px #1a202c, inset -3px -3px 6px #4a5568;
}

.neumorphic-button {
  box-shadow: 6px 6px 12px #98d1d1, -6px -6px 12px #ffffff;
}
.dark .neumorphic-button {
  box-shadow: 6px 6px 12px #1e414f, -6px -6px 12px #324e60;
}

/* Add active state for button press effect */
.neumorphic-button:active {
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2),
              inset -2px -2px 5px rgba(255, 255, 255, 0.7);
}
.dark .neumorphic-button:active {
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.4),
              inset -2px -2px 5px rgba(255, 255, 255, 0.1);
}

/* Further styling for visual depth and subtle skeuomorphism */
.skeleton-label {
  text-shadow: 1px 1px 2px rgba(255,255,255,0.6), -1px -1px 2px rgba(0,0,0,0.1);
}
.dark .skeleton-label {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.4), -1px -1px 2px rgba(255,255,255,0.05);
}

/* Subtle text shadows for better readability on light/dark backgrounds */
h2, p {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
}
.dark h2, .dark p {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
</style>

密码重置组件

用于社交媒体的拟物化密码重置组件，具有相似的配色方案和深色模式支持。

打开预览

                <div class="min-h-screen py-6 flex flex-col justify-center sm:py-12 bg-gradient-to-br from-blue-100 via-blue-200 to-cyan-100 dark:from-gray-800 dark:via-gray-900 dark:to-black">
  <div class="relative py-3 sm:max-w-xl sm:mx-auto">
    <div class="absolute inset-0 bg-gradient-to-r from-blue-400 to-cyan-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl dark:from-gray-700 dark:to-gray-900"></div>
    <div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20 dark:bg-gray-800">
      <div class="max-w-md mx-auto">
        <div>
          <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">Password Reset</h1>
        </div>
        <div class="divide-y divide-gray-200 dark:divide-gray-700">
          <div class="py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg sm:leading-7 dark:text-gray-200">
            <p>Enter your email to receive a password reset link.</p>
            <div class="relative">
              <input autocomplete="off" id="email" name="email" type="text" class="peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 text-gray-900 focus:outline-none focus:borer-rose-600 dark:border-gray-600 dark:text-gray-100 dark:focus:border-blue-500" placeholder="Email address" />
              <label for="email" class="absolute left-0 -top-3.5 text-gray-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-440 peer-placeholder-shown:top-2 transition-all dark:text-gray-400 dark:peer-placeholder-shown:text-gray-500">Email Address</label>
            </div>
            <div class="relative">
              <button class="bg-blue-500 text-white rounded-md px-2 py-1 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 shadow-md">Reset Password</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

密码重置组件

具有 Material Design、鲜艳色彩、适中复杂性和电子商务用途的密码重置组件。它是响应式的，并支持使用 Tailwind CSS 的深色主题。不包含 JavaScript。

打开预览

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
  <div class="max-w-md w-full p-6 bg-white dark:bg-gray-800 rounded-lg shadow-xl">
    <h2 class="text-3xl font-bold text-center text-indigo-600 dark:text-indigo-400 mb-6">Reset Your Password</h2>
    <p class="text-center text-gray-600 dark:text-gray-300 mb-8">Enter your email address and we'll send you a link to reset your password.</p>
    <form>
      <div class="mb-5">
        <label for="email" class="block text-gray-700 dark:text-gray-200 text-sm font-medium mb-2">Email Address</label>
        <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="[email protected]">
      </div>
      <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 text-white font-bold py-3 px-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 transition duration-300">
        Send Reset Link
      </button>
    </form>
    <div class="mt-6 text-center">
      <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-500 text-sm font-medium">Remember your password? Log In</a>
    </div>
  </div>
</div>

密码重置组件 - Retro/Vibrant Dashboard

复古风格的密码重置组件，色彩鲜艳，适用于仪表板。它具有响应式设计和使用 Tailwind CSS 的深色主题支持。该设计唤起了 80 年代/90 年代的美学。

打开预览

                <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 rounded-lg shadow-xl p-8 max-w-md w-full border-4 border-purple-500 dark:border-teal-400 transform -rotate-3 hover:rotate-0 transition-transform duration-300">
    <div class="text-center mb-8">
      <h2 class="text-4xl font-bold text-gray-800 dark:text-white font-mono mb-2">RESET <span class="text-purple-600 dark:text-teal-400">PASSWORD</span></h2>
      <p class="text-gray-600 dark:text-gray-300 text-sm">Enter your email to receive a password reset link.</p>
    </div>
    <form>
      <div class="mb-6">
        <label for="email" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2 uppercase tracking-wider">Email Address</label>
        <input type="email" id="email" class="shadow appearance-none border-4 border-yellow-400 dark:border-rose-500 rounded-lg w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-teal-600 bg-gray-200 dark:bg-gray-700 placeholder-gray-500 dark:placeholder-gray-400 transition-all duration-300" placeholder="[email protected]">
      </div>
      <div class="flex items-center justify-between">
        <button type="submit" class="bg-gradient-to-r from-purple-600 to-pink-500 hover:from-purple-700 hover:to-pink-600 text-white font-extrabold py-3 px-6 rounded-full focus:outline-none focus:shadow-outline transform skew-x-12 hover:skew-x-0 transition-all duration-300 text-lg uppercase tracking-widest">
          Send Link
        </button>
        <a href="#" class="inline-block align-baseline font-bold text-sm text-purple-600 dark:text-teal-400 hover:text-purple-800 dark:hover:text-teal-200 transition-colors duration-300">
          Remembered your password?
        </a>
      </div>
    </form>
    <div class="mt-8 text-center text-gray-500 dark:text-gray-400 text-xs">
      <p>&copy;2023 RETRO CORP. All rights reserved. <span class="text-pink-500 dark:text-yellow-300">Stay Awesome!</span></p>
    </div>
  </div>
</div>

密码重置组件

具有深色模式 UI 的响应式密码重置组件，使用类似的配色方案。专为电子商务应用程序而设计。

打开预览

                <div class="min-h-screen flex items-center justify-center bg-gray-900">
  <div class="bg-gray-800 p-8 rounded-lg shadow-xl w-96">
    <h2 class="text-3xl font-bold text-teal-400 mb-6 text-center">Reset Password</h2>
    <form>
      <div class="mb-4">
        <label for="email" class="block text-gray-300 text-sm font-semibold mb-2">Email Address</label>
        <input type="email" id="email" class="w-full px-4 py-2 bg-gray-700 rounded-lg text-gray-100 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Enter your email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-300 text-sm font-semibold mb-2">New Password</label>
        <input type="password" id="password" class="w-full px-4 py-2 bg-gray-700 rounded-lg text-gray-100 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Enter new password">
      </div>
      <div class="mb-6">
        <label for="confirm-password" class="block text-gray-300 text-sm font-semibold mb-2">Confirm New Password</label>
        <input type="password" id="confirm-password" class="w-full px-4 py-2 bg-gray-700 rounded-lg text-gray-100 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Confirm new password">
      </div>
      <button type="submit" class="w-full bg-teal-600 text-white py-3 rounded-lg font-semibold hover:bg-teal-700 transition duration-300">Reset Password</button>
    </form>
  </div>
</div>

密码重置组件

一个简单的密码重置组件，使用 Material Design 原则设计，采用灰度配色方案。它响应迅速并支持深色模式。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="w-full max-w-md p-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200">Reset Password</h2>
        <p class="mt-2 text-center text-gray-600 dark:text-gray-400">Enter your email address and we will send you a link to reset your password.</p>
        <form class="mt-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
                <input type="email" required class="mt-1 block w-full appearance-none rounded-md border border-gray-300 bg-gray-50 dark:bg-gray-700 dark:border-gray-600 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400" placeholder="[email protected]" />
            </div>
            <button type="submit" class="mt-6 w-full py-2 px-4 bg-gray-800 text-white font-semibold rounded hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500">Send Reset Link</button>
        </form>
        <div class="mt-4 text-center">
            <a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">Back to Login</a>
        </div>
    </div>
</div>

拟物化 Pastel 密码重置

响应式密码重置 Web 组件，采用拟物化美学设计，具有柔和的柔和色彩。界面很复杂，通过 3D 效果、阴影和使用 Tailwind CSS 创建的微妙纹理详细说明了多个交互式元素。它包括一个用于电子邮件输入的表单和一个突出的“发送重置链接”按钮，以及辅助链接。支持深色主题。非常适合作品集展示。

打开预览

                <!-- Ensure TailwindCSS is included in your project -->
<div class="min-h-screen bg-slate-100 dark:bg-slate-900 flex flex-col items-center justify-center p-4 transition-colors duration-300 selection:bg-rose-300 selection:text-rose-900">
  <!-- Skeuomorphic Card -->
  <div class="bg-white dark:bg-slate-800 p-6 sm:p-10 rounded-3xl 
              shadow-[0_10px_20px_rgba(0,0,0,0.04),_0_5px_10px_rgba(0,0,0,0.08)] 
              dark:shadow-[0_10px_20px_rgba(0,0,0,0.25),_0_5px_10px_rgba(0,0,0,0.45)] 
              w-full max-w-md transform transition-all duration-300 
              hover:shadow-[0_15px_30px_rgba(0,0,0,0.06),_0_8px_15px_rgba(0,0,0,0.10)]
              dark:hover:shadow-[0_15px_30px_rgba(0,0,0,0.3),_0_8px_15px_rgba(0,0,0,0.5)]">
    <!-- Header / Title -->
    <div class="text-center mb-8">
      <h1 class="text-3xl font-bold text-rose-600 dark:text-rose-400 tracking-tight">Password Recovery</h1>
      <p class="text-sm text-slate-500 dark:text-slate-400 mt-2">Looks like you forgot your password. No worries!</p>
    </div>

    <!-- Decorative "Grooved" Line -->
    <div class="w-full h-px bg-gradient-to-r from-transparent via-slate-300 dark:via-slate-600 to-transparent mt-8 mb-0"></div>
    <div class="w-full h-px bg-gradient-to-r from-transparent via-white/[0.7] dark:via-slate-700/[0.7] to-transparent mb-8 transform translate-y-[0.5px]"></div>

    <!-- Form -->
    <form action="#" method="POST">
      <div class="space-y-6">
        <!-- Email Input -->
        <div>
          <label for="email" class="block text-sm font-medium text-slate-600 dark:text-slate-300 mb-1.5 select-none">Email Address</label>
          <div class="relative rounded-xl">
            <input type="email" name="email" id="email"
                   class="appearance-none block w-full px-4 py-3 
                          bg-slate-50 dark:bg-slate-700/[0.7] text-slate-800 dark:text-slate-100 
                          placeholder-slate-400 dark:placeholder-slate-500 
                          rounded-xl 
                          border border-slate-200 dark:border-slate-600
                          shadow-[inset_3px_3px_6px_rgba(0,0,0,0.07),_inset_-2px_-2px_4px_rgba(255,255,255,0.4)] 
                          dark:shadow-[inset_3px_3px_6px_rgba(0,0,0,0.3),_inset_-2px_-2px_4px_rgba(75,85,99,0.2)]
                          focus:outline-none focus:ring-2 focus:ring-rose-500 dark:focus:ring-rose-400 focus:border-rose-500 dark:focus:border-rose-400
                          sm:text-sm transition-all duration-200"
                   placeholder="[email protected]">
          </div>
        </div>

        <!-- "Send Reset Link" Button - Skeuomorphic -->
        <div>
          <button type="submit"
                  class="w-full flex justify-center py-3 px-4 rounded-xl 
                         text-base font-semibold text-white select-none
                         bg-gradient-to-br from-rose-500 to-pink-500 hover:from-rose-500 hover:to-pink-500 /* Adjusted hover for consistency of color */
                         dark:from-rose-600 dark:to-pink-600 dark:hover:from-rose-600 dark:hover:to-pink-600
                         shadow-[0_4px_0_0_#a12147] dark:shadow-[0_4px_0_0_#9d174d] /* Rose-700/Pink-700 like fixed colors */
                         hover:shadow-[0_3px_0_0_#a12147] dark:hover:shadow-[0_3px_0_0_#9d174d]
                         active:shadow-[0_1px_0_0_#a12147] dark:active:shadow-[0_1px_0_0_#9d174d]
                         focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500 dark:focus:ring-offset-slate-900
                         transform transition-all duration-100 ease-in-out
                         hover:-translate-y-0.5 active:translate-y-[1px]">
            Send Reset Link
          </button>
        </div>
      </div>
    </form>

    <!-- Decorative "Grooved" Line -->
    <div class="w-full h-px bg-gradient-to-r from-transparent via-slate-300 dark:via-slate-600 to-transparent mt-8 mb-0"></div>
    <div class="w-full h-px bg-gradient-to-r from-transparent via-white/[0.7] dark:via-slate-700/[0.7] to-transparent mb-8 transform translate-y-[0.5px]"></div>

    <!-- Footer Links -->
    <div class="mt-6 text-center">
      <p class="text-sm text-slate-500 dark:text-slate-400">
        Remember your password?
        <a href="#" class="font-medium text-rose-600 hover:text-rose-500 dark:text-rose-400 dark:hover:text-rose-300 transition-colors duration-150">
          Back to Login
        </a>
      </p>
      <p class="mt-2 text-xs text-slate-400 dark:text-slate-500">
        Need help? <a href="#" class="hover:underline text-rose-500 dark:text-rose-400">Contact Support</a>
      </p>
    </div>

    <!-- Portfolio Purpose Stamp -->
    <div class="mt-8 text-center">
        <div class="inline-block mt-2 p-1.5 border-2 border-dashed border-rose-200 dark:border-slate-600 rounded-lg opacity-75 transform rotate-[-2deg] hover:rotate-0 transition-transform duration-200 select-none">
            <span class="text-xs font-mono text-rose-400 dark:text-slate-400 tracking-wider">DESIGN SHOWCASE</span>
        </div>
    </div>
  </div>

  <!-- Subtle "Surface" Background Element for depth -->
  <div class="absolute inset-x-0 bottom-0 h-1/4 bg-gradient-to-t from-slate-200/70 dark:from-slate-950/70 to-transparent -z-10 pointer-events-none"></div>
</div>

密码重置组件

一个受 Material Design 启发的密码重置组件，适用于使用 Tailwind CSS 构建的社交媒体平台。具有具有高饱和度色彩的鲜艳配色方案、简洁的布局和响应式设计，并支持深色模式。该组件包括电子邮件的输入字段、提交按钮和有用的文本。该设计使用了卡片高度、网格布局和深度效果等 Material Design 原则。

打开预览

                <!-- Password Reset Card Container -->
<div class="max-w-md mx-auto my-8 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-all duration-300">
  <!-- Header with Icon -->
  <div class="text-center mb-6">
    <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-purple-100 dark:bg-purple-900 mb-4">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-600 dark:text-purple-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
      </svg>
    </div>
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Reset Password</h1>
    <p class="text-gray-600 dark:text-gray-300 mt-2">Enter your email to receive a password reset link</p>
  </div>
  
  <!-- Form -->
  <form class="space-y-4">
    <!-- Email Input -->
    <div>
      <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
      <div class="relative">
        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
          </svg>
        </div>
        <input id="email" type="email" class="pl-10 w-full py-2 px-4 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 focus:border-transparent dark:text-white transition-colors duration-200" placeholder="[email protected]" required>
      </div>
    </div>
    
    <!-- Submit Button -->
    <button type="submit" class="w-full py-2 px-4 bg-purple-600 hover:bg-purple-700 focus:ring-purple-500 focus:ring-offset-purple-200 text-white font-medium rounded-md transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
      Send Reset Link
    </button>
    
    <!-- Additional Info -->
    <div class="text-center mt-4">
      <p class="text-sm text-gray-600 dark:text-gray-400">
        Remember your password? 
        <a href="#" class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 font-medium transition-colors duration-200">
          Sign in
        </a>
      </p>
    </div>
  </form>
  
  <!-- Security Note -->
  <div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
    <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <p>We'll send a secure link valid for 30 minutes</p>
    </div>
  </div>
</div>

密码重设组件

一个 3D 风格、充满活力的密码重置组件，用于博客和内容使用。它支持深色主题，并具有丰富的交互元素。

打开预览

                <div class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 dark:from-blue-900 dark:to-purple-800 p-6 rounded-lg shadow-lg transform transition-all duration-300 ease-in-out hover:scale-105">
    <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8">
        <h2 class="text-3xl font-semibold text-center text-blue-600 dark:text-blue-400">Reset Your Password</h2>
        <p class="text-center text-gray-600 dark:text-gray-300 mb-6">Enter your email address to receive a link to reset your password.</p>
        <form>
            <div class="mb-4">
                <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Email Address</label>
                <input type="email" id="email" required class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100" placeholder="[email protected]">
            </div>
            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 text-white font-semibold py-2 px-4 rounded-md transition duration-200">Send Password Reset Link</button>
        </form>
        <div class="mt-4 text-center">
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Go back to login</a>
        </div>
    </div>
    <div class="mt-6 flex justify-center">
        <img src="https://picsum.photos/60" alt="User Avatar" class="rounded-full border-4 border-white dark:border-gray-800">
    </div>
</div>