検索コンポーネント

カテゴリ

ログインフォーム

ユーザー認証用フォーム

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

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

開けるプレビュー

                <div class="min-h-screen flex items-center justify-center bg-pink-50 dark:bg-slate-900 p-4 transition-colors duration-300">
  <div class="bg-white dark:bg-slate-800 p-8 md:p-10 rounded-xl shadow-2xl w-full max-w-md transform transition-all duration-500 hover:scale-105">
    <h2 class="text-3xl font-bold text-center text-pink-600 dark:text-pink-400 mb-8">
      Welcome Back
    </h2>
    <form action="#" method="POST" class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
          Email address
        </label>
        <input
          id="email"
          name="email"
          type="email"
          autocomplete="email"
          required
          class="appearance-none block w-full px-4 py-3 rounded-lg border border-pink-200 dark:border-slate-600 placeholder-slate-400 dark:placeholder-slate-500 text-slate-900 dark:text-slate-100 bg-white dark:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 focus:border-transparent transition-all duration-300 ease-in-out shadow-sm hover:shadow-md focus:shadow-lg"
          placeholder="[email protected]"
        />
      </div>

      <div>
        <label for="password" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
          Password
        </label>
        <input
          id="password"
          name="password"
          type="password"
          autocomplete="current-password"
          required
          class="appearance-none block w-full px-4 py-3 rounded-lg border border-pink-200 dark:border-slate-600 placeholder-slate-400 dark:placeholder-slate-500 text-slate-900 dark:text-slate-100 bg-white dark:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 focus:border-transparent transition-all duration-300 ease-in-out shadow-sm hover:shadow-md focus:shadow-lg"
          placeholder="••••••••"
        />
      </div>

      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-pink-500 dark:text-pink-400 focus:ring-pink-400 dark:focus:ring-pink-300 border-pink-300 dark:border-slate-500 rounded bg-pink-50 dark:bg-slate-700 transition duration-150 ease-in-out" />
          <label for="remember-me" class="ml-2 block text-sm text-slate-800 dark:text-slate-300">
            Remember me
          </label>
        </div>
        <div class="text-sm">
          <a href="#" class="font-medium text-pink-500 hover:text-pink-400 dark:text-pink-400 dark:hover:text-pink-300 transition-colors duration-150 ease-in-out">
            Forgot password?
          </a>
        </div>
      </div>

      <div>
        <button
          type="submit"
          class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-md text-lg font-medium text-white bg-pink-500 hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:focus:ring-offset-slate-800 transform transition-all duration-300 ease-in-out hover:scale-105 active:scale-95"
        >
          Sign In
        </button>
      </div>
    </form>
    <p class="mt-8 text-center text-sm text-slate-600 dark:text-slate-400">
      Not a member?
      <a href="#" class="font-medium text-pink-500 hover:text-pink-400 dark:text-pink-400 dark:hover:text-pink-300 transition-colors duration-150 ease-in-out">
        Sign up now
      </a>
    </p>
  </div>
</div>

ミニマリストEコマースログインフォーム

パステルカラーのミニマリストでフラットなデザインのログインフォームで、eコマースサイト向けに設計されています。シンプルでレスポンシブで、Tailwind CSSを使用したダークモードをサポートしています。

開けるプレビュー

                <div
      class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900"
    >
      <div
        class="max-w-md w-full p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md"
      >
        <h2
          class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6"
        >
          Login
        </h2>
        <form>
          <div class="mb-4">
            <label
              for="email"
              class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
            >
              Email Address
            </label>
            <input
              type="email"
              id="email"
              name="email"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
              placeholder="Enter your email"
            />
          </div>
          <div class="mb-6">
            <label
              for="password"
              class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
            >
              Password
            </label>
            <input
              type="password"
              id="password"
              name="password"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
              placeholder="Enter your password"
            />
          </div>
          <button
            type="submit"
            class="w-full bg-pastel-blue text-black py-2 px-4 rounded-md hover:bg-pastel-darker-blue focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-200"
          >
            Login
          </button>
        </form>
        <div class="mt-6 text-center">
          <p class="text-sm text-gray-600 dark:text-gray-300">
            Don't have an account? <a href="#" class="text-pastel-blue hover:underline">Sign Up</a>
          </p>
        </div>
      </div>
    </div>

ミニマリストログインフォーム

レスポンシブデザインとダークモードをサポートする、eコマースサイト用のミニマリストログインフォーム。類似の配色を使用します。JavaScript はありません。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-md p-8 space-y-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
    <h2 class="text-2xl font-bold text-center text-gray-900 dark:text-white">Login</h2>
    <form class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label>
        <input id="email" name="email" type="email" autocomplete="email" required class="relative block w-full px-3 py-2 mt-1 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-md appearance-none cursor-text focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:border-gray-600">
      </div>
      <div>
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
        <input id="password" name="password" type="password" autocomplete="current-password" required class="relative block w-full px-3 py-2 mt-1 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-md appearance-none cursor-text focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:border-gray-600">
      </div>
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox" class="w-4 h-4 text-indigo-600 border-gray-300 rounded dark:text-indigo-500 dark:border-gray-600 dark:bg-gray-700 focus:ring-indigo-500">
          <label for="remember-me" class="block ml-2 text-sm text-gray-900 dark:text-gray-300">Remember me</label>
        </div>
        <div class="text-sm">
          <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-500 dark:hover:text-indigo-400">Forgot your password?</a>
        </div>
      </div>
      <div>
        <button type="submit" class="relative flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md group hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-indigo-700 dark:hover:bg-indigo-600">
          Sign in
        </button>
      </div>
    </form>
    <div class="text-sm text-center">
      <p class="text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-500 dark:hover:text-indigo-400">Sign up</a></p>
    </div>
  </div>
</div>

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

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

開けるプレビュー

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

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

ビジネス/企業のWebサイト向けに設計されたレスポンシブ3Dログインフォームコンポーネントで、アースカラーとダークモードのサポートが組み込まれています。

開けるプレビュー

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-8 max-w-md w-full">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center mb-6">Login to Your Account</h2>
    <form>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email Address</label>
        <input type="email" id="email" class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400" placeholder="[email protected]" required>
      </div>
      <div class="mb-6">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
        <input type="password" id="password" class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400" placeholder="••••••••" required>
      </div>
      <div class="mb-4 flex items-center justify-between">
        <div>
          <input type="checkbox" class="text-green-600 rounded focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400">
          <span class="text-gray-700 dark:text-gray-300 ml-2">Remember me</span>
        </div>
        <a href="#" class="text-green-600 dark:text-green-400 text-sm">Forgot Password?</a>
      </div>
      <button type="submit" class="w-full bg-green-600 hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-400 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400 transition duration-200">Login</button>
    </form>
    <p class="mt-4 text-center text-gray-600 dark:text-gray-400 text-sm">
      Don't have an account? <a href="#" class="text-green-600 dark:text-green-400">Sign Up</a>
    </p>
  </div>
</div>

ブルータリストログインフォーム

アースカラーのブルータリズムスタイルでデザインされた複雑で応答性の高いログインフォームで、eコマースアプリケーション向けに調整され、ダークモードのサポートを備えています。

開けるプレビュー

                <div class="min-h-screen flex items-center justify-center bg-gray-300 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg w-full max-w-md">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-white text-center mb-6">Login</h2>
        <form>
            <div class="mb-4">
                <label class="block text-lg font-medium text-gray-700 dark:text-gray-300" for="email">Email</label>
                <input type="email" id="email" class="mt-1 block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring focus:ring-green-500 dark:focus:ring-green-600" required>
            </div>
            <div class="mb-4">
                <label class="block text-lg font-medium text-gray-700 dark:text-gray-300" for="password">Password</label>
                <input type="password" id="password" class="mt-1 block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring focus:ring-green-500 dark:focus:ring-green-600" required>
            </div>
            <div class="flex justify-between mb-6">
                <div class="flex items-center">
                    <input type="checkbox" id="remember" class="mr-2 leading-tight">
                    <label for="remember" class="text-sm text-gray-600 dark:text-gray-400">Remember Me</label>
                </div>
                <a href="#" class="text-sm text-green-600 hover:underline dark:text-green-400">Forgot Password?</a>
            </div>
            <button type="submit" class="w-full py-2 text-white bg-green-600 rounded-md hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-400 transition duration-150 ease-in-out">Login</button>
        </form>
        <div class="mt-4 text-center">
            <p class="text-sm text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-green-600 hover:underline dark:text-green-400">Sign Up</a></p>
        </div>
        <div class="mt-8 text-center">
            <img src="https://picsum.photos/100" alt="Random" class="rounded-full mx-auto">
            <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">User Avatar Loaded Randomly</p>
        </div>
    </div>
</div>