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

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

ニューモーフィズムスタイル、補色スキーム、複雑な複雑さ、ソーシャルメディア目的、Tailwind CSSを使用したパスワードリセットコンポーネント。ダークテーマをサポートするレスポンシブデザイン。

プレビュー

HTMLコード 

<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>

関連コンポーネント

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

政府/公共サービス向けに設計された複雑なパスワードリセットコンポーネントで、高コントラストの色とダークモードのサポートを含む完全な応答性を備えた、すっきりとしたミニマリストのタイポグラフィ主導のデザインを特徴としています。

開ける

Retro_Crypto_Password_Reset_Component

暗号通貨およびブロックチェーンアプリケーション用に設計された、レトロ/ビンテージをテーマにした複雑なパスワードリセットコンポーネントで、マルチステップインタラクション、レスポンシブレイアウト、ダークモードのサポートを特長としています。

開ける

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

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

開ける