CCHub Logo CCHub Tailwind Collection
コンポーネント ログインフォーム ログインフォームコンポーネント

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

マテリアルデザイン、トライアドカラースキーム、Tailwind CSSを使用したダークモードサポートを備えたレスポンシブログインフォーム。

プレビュー

HTMLコード 

<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 dark:from-gray-800 dark:via-gray-900 dark:to-black">
  <div class="px-8 py-6 mt-4 text-left bg-white dark:bg-gray-800 shadow-lg rounded-lg">
    <h3 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Login to your account</h3>
      <div class="mt-4">
          <div>
              <label class="block text-gray-700 dark:text-gray-200" 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-blue-600 dark:bg-gray-700 dark:text-white dark:border-gray-600">
          </div>
          <div class="mt-4">
              <label class="block text-gray-700 dark:text-gray-200" for="password">Password</label>
              <input type="password" placeholder="Password" class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600 dark:bg-gray-700 dark:text-white dark:border-gray-600">
          </div>
          <div class="flex items-baseline justify-between">
              <button class="px-6 py-2 mt-4 text-white bg-blue-600 rounded-lg hover:bg-blue-900 dark:bg-blue-700 dark:hover:bg-blue-900">Login</button>
              <a href="#" class="text-sm text-blue-600 dark:text-blue-400 hover:underline focus:text-blue-800">Forgot password?</a>
          </div>
      </div>
  </div>
</div>

関連コンポーネント

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

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

開ける

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

Glassmorphism スタイルで設計されたレスポンシブ ログイン フォーム コンポーネントで、すりガラス効果、ぼかし効果、Tailwind CSS を使用したダーク モードのサポートが組み込まれています。

開ける

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

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

開ける