CCHub Logo CCHub Tailwind Collection
コンポーネント ログインフォーム スキューモーフィックログインフォーム

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

Skeuomorphismデザイン、単色の配色、適度な複雑さを備えたレスポンシブログインフォームで、ソーシャルメディアプラットフォーム向けに設計されています。Tailwind CSS を使用したダーク モードのサポートが含まれています。

プレビュー

HTMLコード 

<form class="max-w-sm mx-auto p-8 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark">
  <div class="mb-6">
    <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email</label>
    <input type="email" id="email" class="shadow-inner appearance-none border rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600" placeholder="Enter your email">
  </div>
  <div class="mb-6">
    <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Password</label>
    <input type="password" id="password" class="shadow-inner appearance-none border rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600" placeholder="Enter your password">
  </div>
  <div class="flex items-center justify-between">
    <button class="bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 text-white font-bold py-3 px-6 rounded focus:outline-none focus:shadow-outline transform transition duration-300 ease-in-out hover:scale-105" type="button">
      Sign In
    </button>
    <a class="inline-block align-baseline font-bold text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-500" href="#">
      Forgot Password?
    </a>
  </div>
  <div class="mt-6 text-center">
    <p class="text-gray-600 dark:text-gray-400 text-sm">Or sign in with:</p>
    <div class="flex justify-center gap-4 mt-2">
      <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
        <i class="fab fa-google text-xl"></i>
      </button>
      <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
        <i class="fab fa-facebook text-xl"></i>
      </button>
      <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
        <i class="fab fa-twitter text-xl"></i>
      </button>
    </div>
  </div>
</form>

関連コンポーネント

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

パステルカラーパレット(ソフトピンクと補完的なグレー)と、スムーズなトランジションや微妙なホバー/フォーカス効果などの魅力的なマイクロインタラクションで作られた、シンプルでレスポンシブなログインフォームコンポーネント。ビジネスまたは企業のWebサイト向けに設計されており、すっきりとしたレイアウトが特徴で、完全にレスポンシブで、包括的なダークテーマのサポートが含まれています。純粋にHTMLとTailwind CSSで構築されています。

開ける

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

glassmorphismでスタイル化されたレスポンシブログインフォームコンポーネントで、ぼかし効果とダークテーマのサポートを備えた半透明の要素が特徴です。

開ける

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

シンプルで応答性の高いログインフォームは、鮮やかな配色を使用して現実世界の要素を模倣するスキューモーフィックスタイルで設計されています。ソーシャルメディアのインターフェースに適しており、ダークモードをサポートしています。

開ける