CCHub Logo CCHub Tailwind Collection
コンポーネント 登録フォーム ブルータリズム登録フォーム

ブルータリズム登録フォーム

ブルータリズムデザイン、トライアドカラースキーム、シンプルな複雑さを備えた登録フォームコンポーネントで、ダッシュボードに適しています。レスポンシブで、Tailwind CSSを使用したダークモードをサポートしています。

プレビュー

HTMLコード 

<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md w-full max-w-sm border-4 border-black dark:border-white">
    <h2 class="text-2xl font-bold text-center text-black dark:text-white mb-8 font-mono">Register</h2>
    <form>
      <div class="mb-4">
        <label for="username" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 font-mono">Username</label>
        <input type="text" id="username" class="shadow appearance-none border-2 border-black dark:border-white bg-white dark:bg-gray-700 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline font-mono"
               placeholder="Enter your username">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 font-mono">Email</label>
        <input type="email" id="email" class="shadow appearance-none border-2 border-black dark:border-white bg-white dark:bg-gray-700 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline font-mono"
               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 font-mono">Password</label>
        <input type="password" id="password" class="shadow appearance-none border-2 border-black dark:border-white bg-white dark:bg-gray-700 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 mb-3 leading-tight focus:outline-none focus:shadow-outline font-mono"
               placeholder="Enter your password">
      </div>
      <div class="flex items-center justify-between">
        <button type="button"
                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline border-2 border-black dark:border-white font-mono
                       dark:bg-blue-700 dark:hover:bg-blue-900">
          Register
        </button>
        <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800 dark:text-blue-300 dark:hover:text-blue-500 font-mono" href="#">
          Forgot Password?
        </a>
      </div>
    </form>
  </div>
</div>

関連コンポーネント

登録フォームコンポーネント

glassmorphism スタイル、アース トーンの配色、およびダーク テーマのサポートを備えたレスポンシブ登録フォーム コンポーネント。ソーシャルメディアプラットフォーム向けに設計されており、シンプルなレイアウトと最小限の要素を備えています。スタイル設定に Tailwind CSS を使用し、サンプルの画像プレースホルダーが含まれています。

開ける

登録フォームコンポーネント

Neumorphismデザイン、類似の配色、およびダークモードのサポートを備えたレスポンシブ登録フォームで、ソーシャルメディアの目的でTailwind CSSで構築されています。

開ける

登録フォームコンポーネント

パステルカラーのブルータリストスタイルでデザインされ、ビジネス/企業のWebサイトに適したレスポンシブ登録フォームコンポーネント。Tailwind CSSを使用したダークモードのサポートが特徴です。

開ける