CCHub Logo CCHub Tailwind Collection
コンポーネント ログインフォーム ニューモーフィズムログインフォーム

ニューモーフィズムログインフォーム

Neumorphism スタイルでデザインされたログインフォームコンポーネントで、レスポンシブデザインと Tailwind CSS を使用したダークテーマのサポートが特徴です。

プレビュー

HTMLコード 

<div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8 w-96">
        <h1 class="text-2xl font-semibold mb-6 text-gray-800 dark:text-gray-100">Login</h1>
        <form>
            <div class="mb-4">
                <label for="email" class="block text-gray-700 dark:text-gray-200">Email</label>
                <input type="email" id="email" class="mt-1 block w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="[email protected]" required />
            </div>
            <div class="mb-4">
                <label for="password" class="block text-gray-700 dark:text-gray-200">Password</label>
                <input type="password" id="password" class="mt-1 block w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="••••••••" required />
            </div>
            <div class="mt-6">
                <button type="submit" class="w-full py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300">Login</button>
            </div>
        </form>
    </div>
</div>

関連コンポーネント

スキューモーフィックログインフォーム

ダッシュボード用のトライアドカラーを使用したシンプルなSkeuomorphicログインフォームで、レスポンシブデザインとTailwind CSSを使用したダークモードのサポートが特徴です。

開ける

Brutalist_Login_Form_Travel_Tourism

旅行や観光のウェブサイト向けに設計された、鮮やかな色の中程度の複雑さのブルータリズムスタイルのログインフォーム。ハイコントラスト、大胆なタイポグラフィ、ダークモードのサポートによる完全な応答性を備えています。

開ける

ログインフォームコンポーネント

パステルカラーを使用したダークモードをサポートするレスポンシブログインフォームコンポーネントで、ニュース/ジャーナリズムWebサイトに適しています。暗いUIで目の疲れを軽減します。

開ける