CCHub Logo CCHub Tailwind Collection
コンポーネント パスワードのリセット パスワードリセットコンポーネント

パスワードリセットコンポーネント

ミニマリスト/フラットデザインのパスワードリセットコンポーネントで、アースカラーで、不動産プラットフォームに適しています。レスポンシブレイアウト、ダークモードのサポート、複雑なインターフェイス用の複数の入力フィールドを備えています。

プレビュー

HTMLコード 

<div class="min-h-screen bg-stone-100 flex items-center justify-center p-4 dark:bg-stone-900">
  <div class="max-w-md w-full bg-white p-8 rounded-lg shadow-xl dark:bg-stone-800 dark:text-stone-200 border border-stone-200 dark:border-stone-700">
    <div class="text-center mb-8">
      <h2 class="text-3xl font-bold text-stone-800 dark:text-stone-100 mb-2">Reset Your Password</h2>
      <p class="text-stone-600 dark:text-stone-400">Enter your new password below. It should be strong and unique.</p>
    </div>

    <form class="space-y-6">
      <div>
        <label for="new-password" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">New Password</label>
        <input type="password" id="new-password" name="new-password" required class="mt-1 block w-full px-4 py-2 bg-stone-50 border border-stone-300 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500 sm:text-sm dark:bg-stone-700 dark:border-stone-600 dark:text-stone-100 dark:placeholder-stone-400">
        <p class="mt-2 text-sm text-stone-500 dark:text-stone-400">Must be at least 8 characters, with letters, numbers, and symbols.</p>
      </div>

      <div>
        <label for="confirm-password" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">Confirm New Password</label>
        <input type="password" id="confirm-password" name="confirm-password" required class="mt-1 block w-full px-4 py-2 bg-stone-50 border border-stone-300 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500 sm:text-sm dark:bg-stone-700 dark:border-stone-600 dark:text-stone-100 dark:placeholder-stone-400">
      </div>

      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-amber-600 focus:ring-amber-500 border-stone-300 rounded dark:bg-stone-700 dark:border-stone-600 dark:checked:bg-amber-700">
          <label for="remember-me" class="ml-2 block text-sm text-stone-900 dark:text-stone-300">Remember me on this device</label>
        </div>
      </div>

      <div>
        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:bg-amber-700 dark:hover:bg-amber-800 dark:focus:ring-offset-stone-800">
          Reset Password
        </button>
      </div>
    </form>

    <div class="mt-6 text-center text-sm">
      <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400">Back to login</a>
    </div>
  </div>
</div>

関連コンポーネント

パスワードリセットコンポーネント

等幅/開発者デザイン、秋の配色、端末の美学を備えたレスポンシブパスワードリセットコンポーネントで、eコマースアプリケーションに適しています。ダークモードのサポートが含まれています。

開ける

Skeuomorphic Pastel パスワードリセット

Skeuomorphismの美学でデザインされたレスポンシブなパスワードリセットWebコンポーネントで、柔らかなパステルカラーが特徴です。インターフェイスは複雑で、Tailwind CSS で作成された 3D エフェクト、シャドウ、微妙なテクスチャを通じて詳細に説明される複数のインタラクティブ要素があります。これには、電子メール入力用のフォームと目立つ[リセットリンクの送信]ボタン、およびセカンダリリンクが含まれています。ダークテーマがサポートされています。ポートフォリオのショーケースに最適です。

開ける

パスワードリセットコンポーネント

マテリアルデザインにインスパイアされた、Tailwind CSSで構築されたソーシャルメディアプラットフォーム用のパスワードリセットコンポーネント。彩度の高い色、すっきりとしたレイアウト、ダークモードをサポートするレスポンシブデザインを備えた鮮やかな配色が特徴です。このコンポーネントには、メール、送信ボタン、便利なテキストの入力フィールドが含まれています。このデザインでは、カードの高さ、グリッド レイアウト、奥行き効果などのマテリアル デザインの原則を使用しています。

開ける