검색 구성 요소

카테고리

구성 요소 로그인 양식

로그인 양식

사용자 인증을 위한 양식

로그인 양식 구성 요소

어스 톤, 머티리얼 디자인 영향을 받은 복잡하고 반응이 빠른 로그인 양식 구성 요소로, 비즈니스/기업 웹 사이트에 적합하며 다크 모드 지원을 포함합니다.

                <div class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden md:max-w-xl transition-all duration-300 transform scale-95 md:scale-100 hover:shadow-3xl">
    <div class="md:flex">
      <div class="w-full p-8 md:p-10">
        <div class="text-center mb-8">
          <svg class="mx-auto h-12 w-auto text-yellow-700 dark:text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
          </svg>
          <h2 class="mt-6 text-3xl font-extrabold text-gray-900 dark:text-gray-100 leading-tight">Welcome Back!</h2>
          <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Sign in to continue to your account.</p>
        </div>

        <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>
            <div class="mt-1 relative rounded-md shadow-sm">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.5a.75.75 0 00-.75-.75h-7.5a.75.75 0 00-.75.75v3a.75.75 0 00.75.75h7.5a.75.75 0 00.75-.75v-3z" />
                </svg>
              </div>
              <input type="email" id="email" name="email" autocomplete="email" required class="focus:ring-yellow-500 focus:border-yellow-500 block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md leading-5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 sm:text-sm transition duration-150 ease-in-out" placeholder="[email protected]">
            </div>
          </div>

          <div>
            <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
            <div class="mt-1 relative rounded-md shadow-sm">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                </svg>
              </div>
              <input type="password" id="password" name="password" autocomplete="current-password" required class="focus:ring-yellow-500 focus:border-yellow-500 block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md leading-5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 sm:text-sm transition duration-150 ease-in-out" placeholder="••••••••">
            </div>
          </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-yellow-600 dark:text-yellow-500 focus:ring-yellow-500 border-gray-300 dark:border-gray-600 rounded">
              <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
            </div>

            <div class="text-sm">
              <a href="#" class="font-medium text-yellow-600 dark:text-yellow-500 hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200">Forgot your password?</a>
            </div>
          </div>

          <div>
            <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-medium text-white bg-yellow-700 hover:bg-yellow-800 dark:bg-yellow-600 dark:hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 dark:focus:ring-offset-gray-900 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-100">
              Sign in
            </button>
          </div>
        </form>

        <div class="mt-6">
          <div class="relative">
            <div class="absolute inset-0 flex items-center" aria-hidden="true">
              <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
            </div>
            <div class="relative flex justify-center text-sm">
              <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">Or continue with</span>
            </div>
          </div>

          <div class="mt-6 grid grid-cols-2 gap-3">
            <div>
              <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 dark:focus:ring-offset-gray-800">
                <svg class="mr-2 h-5 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.873V13.86h-2.54V10h2.54V7.584c0-2.508 1.493-3.89 3.774-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.262c-1.225 0-1.624.766-1.624 1.569V10h2.775l-.444 3.86h-2.33V20C16.343 19.128 20 14.991 20 10z" clip-rule="evenodd" />
                </svg>
                Facebook
              </a>
            </div>

            <div>
              <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 dark:focus:ring-offset-gray-800">
                <svg class="mr-2 h-5 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M6.29 15.932A8 8 0 103 10a8.01 8.01 0 003.29 5.932L2 18l3.932-4.29zM10 12a2 2 0 100-4 2 2 0 000 4z"/>
                </svg>
                Google
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

로그인 양식 구성 요소 - 다크 모드 Vibrant

눈의 피로를 줄이기 위해 생생한 색 구성표와 완전한 다크 모드 지원을 통해 비즈니스/기업용으로 설계된 복잡하고 반응이 빠른 로그인 양식 구성 요소입니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center p-4 bg-gray-950 dark:bg-gray-950">
  <div class="w-full max-w-md mx-auto rounded-3xl shadow-2xl p-8 transform transition-all duration-300 ease-in-out bg-gradient-to-br from-indigo-900 to-purple-900 dark:from-indigo-950 dark:to-purple-950 border border-purple-700 dark:border-purple-800">
    <div class="text-center mb-8">
      <svg class="mx-auto h-12 w-auto text-purple-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <h2 class="mt-4 text-3xl font-extrabold text-white tracking-tight leading-tight">Sign In to Your Account</h2>
      <p class="mt-2 text-sm text-purple-200">Or <a href="#" class="font-medium text-purple-100 hover:text-purple-50 transition-colors duration-200">create a new account</a></p>
    </div>

    <form class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-purple-200 mb-1">Email Address</label>
        <div class="relative">
          <input id="email" name="email" type="email" autocomplete="email" required
            class="appearance-none block w-full px-4 py-2 pr-10 border border-purple-600 dark:border-purple-700 rounded-lg shadow-sm placeholder-purple-400 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-purple-400 sm:text-base bg-purple-800 bg-opacity-30 text-white transition-all duration-200 ease-in-out"
            placeholder="[email protected]">
          <span class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
            <svg class="h-5 w-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path></svg>
          </span>
        </div>
      </div>

      <div>
        <label for="password" class="block text-sm font-medium text-purple-200 mb-1">Password</label>
        <div class="relative">
          <input id="password" name="password" type="password" autocomplete="current-password" required
            class="appearance-none block w-full px-4 py-2 pr-10 border border-purple-600 dark:border-purple-700 rounded-lg shadow-sm placeholder-purple-400 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-purple-400 sm:text-base bg-purple-800 bg-opacity-30 text-white transition-all duration-200 ease-in-out"
            placeholder="********">
          <span class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
            <svg class="h-5 w-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2v5a2 2 0 01-2 2H9a2 2 0 01-2-2V9a2 2 0 012-2h6zM15 7V4a2 2 0 00-2-2H9a2 2 0 00-2 2v3m0 0H5h14m-9 4h3"></path></svg>
          </span>
        </div>
      </div>

      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox"
            class="h-5 w-5 text-purple-400 focus:ring-purple-300 border-purple-500 rounded bg-purple-700 dark:bg-purple-800 transition-colors duration-200 ease-in-out">
          <label for="remember-me" class="ml-2 block text-sm text-purple-200">Remember me</label>
        </div>

        <div class="text-sm">
          <a href="#" class="font-medium text-purple-100 hover:text-purple-50 transition-colors duration-200">Forgot your password?</a>
        </div>
      </div>

      <div>
        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg text-lg font-semibold text-white bg-gradient-to-r from-purple-500 to-indigo-600 hover:from-purple-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-900 focus:ring-purple-400 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5">
          Sign In
        </button>
      </div>
    </form>

    <div class="mt-8 text-center">
      <div class="relative">
        <div class="absolute inset-0 flex items-center" aria-hidden="true">
          <div class="w-full border-t border-purple-700"></div>
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="px-3 bg-gradient-to-br from-indigo-900 to-purple-900 dark:from-indigo-950 dark:to-purple-950 text-purple-200">Or continue with</span>
        </div>
      </div>

      <div class="mt-6 grid grid-cols-2 gap-3">
        <div>
          <a href="#"
            class="w-full inline-flex justify-center py-3 px-4 border border-purple-700 rounded-lg shadow-sm bg-purple-800 bg-opacity-40 text-sm font-medium text-white hover:bg-purple-700 dark:hover:bg-purple-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-900 focus:ring-purple-400 transition-all duration-200 ease-in-out">
            <svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm2.25 18.25h-2.5V11.5H9.75V9.25h-1.5V11.5h-.75V9.25H5.25V7h2V4.75h1.5V7h1.5V4.75h-.75c-.828 0-1.5.672-1.5 1.5v1.5h.75c.828 0 1.5-.672 1.5-1.5V5.5h-.75c-.828 0-1.5.672-1.5 1.5V9.25H8.25V7h-1.5V4.75h1.5V7h1.5V4.75h.75c.828 0 1.5-.672 1.5-1.5V9.25h-1.5v2.25h-1.5v6.75zm1.5-1.5H16V9.25h-1.5v8.25z" />
            </svg>
            Google
          </a>
        </div>

        <div>
          <a href="#"
            class="w-full inline-flex justify-center py-3 px-4 border border-purple-700 rounded-lg shadow-sm bg-purple-800 bg-opacity-40 text-sm font-medium text-white hover:bg-purple-700 dark:hover:bg-purple-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-900 focus:ring-purple-400 transition-all duration-200 ease-in-out">
            <svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm2.25 18.25h-2.5V11.5H9.75V9.25h1.5V11.5h.75V9.25H5.25V7h2.25V4.75H8V7h1.5V4.75h.75c.828 0 1.5-.672 1.5-1.5V9.25h-1.5V11.5h-1.5v6.75zm1.5-1.5H16V9.25h-1.5v8.25zM12 10.5h-1.5V7H12v3.5zm-1.5-4h1.5V4.75H10.5V6.5z" />
            </svg>
            GitHub
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

로그인 양식 구성 요소

전자 상거래에 적합한 트라이어딕 색 구성표가 있는 3D 디자인 로그인 양식 구성 요소로, 어두운 테마 지원 및 응답성을 갖추고 있으며 Tailwind CSS로 구축되었습니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
  <div class="relative w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 transform transition-all duration-300 hover:scale-105">
    <div class="absolute inset-0 bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 opacity-20 dark:opacity-40 rounded-lg transform -rotate-3 translate-x-2 translate-y-2 blur-sm"></div>
    <div class="relative z-10">
      <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6">Welcome Back!</h2>
      <p class="text-center text-gray-600 dark:text-gray-300 mb-8">Sign in to your e-commerce account</p>

      <form class="space-y-6">
        <div>
          <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" placeholder="[email protected]" class="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 focus:border-transparent transition duration-200 ease-in-out text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 shadow-sm transform translate-z-0.5">
        </div>

        <div>
          <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" placeholder="••••••••" class="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-pink-500 dark:focus:ring-pink-400 focus:border-transparent transition duration-200 ease-in-out text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 shadow-sm transform translate-z-0.5">
        </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-purple-600 dark:text-purple-500 focus:ring-purple-500 dark:focus:ring-purple-400 border-gray-300 rounded transform translate-z-0.5">
            <label for="remember_me" class="ml-2 block text-sm text-gray-900 dark:text-gray-200">Remember me</label>
          </div>
          <a href="#" class="text-sm font-medium text-pink-600 dark:text-pink-400 hover:text-pink-500 dark:hover:text-pink-300 transition duration-200 ease-in-out">Forgot your password?</a>
        </div>

        <button type="submit" class="w-full py-3 px-4 rounded-lg bg-red-600 dark:bg-red-500 text-white font-semibold text-lg shadow-lg hover:bg-red-700 dark:hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transform translate-z-0.5 transition duration-300 ease-in-out hover:-translate-y-0.5">
          Sign In
        </button>
      </form>

      <div class="mt-8 text-center">
        <p class="text-sm text-gray-600 dark:text-gray-400">Don't have an account? 
          <a href="#" class="font-medium text-purple-600 dark:text-purple-400 hover:text-purple-500 dark:hover:text-purple-300 transition duration-200 ease-in-out">Sign Up</a>
        </p>
      </div>
    </div>
  </div>
</div>

RetroLoginForm컴포넌트

반응형, 어두운 테마 지원, 어스 톤의 레트로/빈티지 로그인 양식, 비즈니스/기업 웹사이트에 적합합니다. 최소한의 요소를 사용합니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center bg-stone-100 dark:bg-stone-900">
  <div class="max-w-md w-full p-8 bg-amber-100 dark:bg-amber-900 rounded-lg shadow-lg">
    <h2 class="text-center text-3xl font-extrabold text-stone-800 dark:text-stone-200 mb-6">Welcome Back</h2>
    <form class="space-y-6">
      <div>
        <label for="email" class="sr-only">Email address</label>
        <input id="email" name="email" type="email" autocomplete="email" required class="apperance-none relative block w-full px-3 py-2 border border-stone-300 dark:border-stone-700 placeholder-stone-500 dark:placeholder-stone-300 text-stone-900 dark:text-stone-100 rounded-md focus:outline-none focus:ring-amber-500 focus:border-amber-500 focus:z-10 sm:text-sm bg-stone-50 dark:bg-stone-800" placeholder="Email address">
      </div>
      <div>
        <label for="password" class="sr-only">Password</label>
        <input id="password" name="password" type="password" autocomplete="current-password" required class="apperance-none relative block w-full px-3 py-2 border border-stone-300 dark:border-stone-700 placeholder-stone-500 dark:placeholder-stone-300 text-stone-900 dark:text-stone-100 rounded-md focus:outline-none focus:ring-amber-500 focus:border-amber-500 focus:z-10 sm:text-sm bg-stone-50 dark:bg-stone-800" placeholder="Password">
      </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-amber-600 focus:ring-amber-500 border-stone-300 dark:border-stone-700 rounded">
          <label for="remember-me" class="ml-2 block text-sm text-stone-900 dark:text-stone-100">Remember me</label>
        </div>
        <div class="text-sm">
          <a href="#" class="font-medium text-amber-600 hover:text-amber-500">Forgot your password?</a>
        </div>
      </div>
      <div>
        <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-amber-700 hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:bg-amber-800 dark:hover:bg-amber-700">
          Sign in
        </button>
      </div>
    </form>
  </div>
</div>

로그인 양식 구성 요소

블로그 또는 콘텐츠 사이트에 적합한 미니멀리스트/플랫 디자인의 반응형의 복잡한 로그인 양식입니다. 단색 색 구성표, 어두운 테마 지원 및 HTML 및 Tailwind CSS로만 순전히 구현된 여러 대화형 요소가 특징입니다.

열다 미리 보기

                <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 p-8 rounded-lg shadow-xl w-full max-w-md">
    <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-8">Login to Your Account</h2>

    <div class="flex justify-center mb-6">
      <img src="https://picsum.photos/100" alt="Blog Logo" class="rounded-full w-24 h-24 object-cover border-4 border-gray-200 dark:border-gray-700">
    </div>

    <form>
      <div class="mb-5">
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
        <input type="email" id="email" class="w-full px-4 py-3 rounded-md bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 text-gray-900 dark:text-white transition duration-200" placeholder="[email protected]">
      </div>
      <div class="mb-5">
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Password</label>
        <input type="password" id="password" class="w-full px-4 py-3 rounded-md bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 text-gray-900 dark:text-white transition duration-200" placeholder="••••••••">
      </div>

      <div class="flex items-center justify-between mb-6">
        <div class="flex items-center">
          <input type="checkbox" id="remember_me" class="h-4 w-4 text-blue-600 dark:text-blue-500 rounded border-gray-300 dark:border-gray-600 focus:ring-blue-500 dark:focus:ring-blue-400">
          <label for="remember_me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
        </div>
        <a href="#" class="text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200">Forgot Password?</a>
      </div>

      <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-200">
        Login
      </button>
    </form>

    <div class="mt-8 text-center text-gray-600 dark:text-gray-400">
      <p>Don't have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 font-medium transition duration-200">Sign Up</a></p>
    </div>

    <div class="mt-6 flex flex-col sm:flex-row justify-center space-y-3 sm:space-y-0 sm:space-x-4">
      <button class="w-full sm:w-auto bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 text-white font-bold py-2 px-4 rounded-md flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-200">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12.0003 4.75C9.0935 4.75 6.647 6.0211 5.09348 7.98926L2.36865 5.26442C4.24689 3.03348 7.02705 1.75 12.0003 1.75C16.8967 1.75 20.9157 3.4283 23.6393 5.92015L20.6125 8.947C18.667 7.0425 15.6033 5.92015 12.0003 5.92015C9.80036 5.92015 7.84687 6.69344 6.37508 8.01639L5 6.77258V6.7725C5 6.81846 5 6.86445 5 6.91042Z" clip-rule="evenodd" fill-rule="evenodd"/>
          <path d="M4.75 9.99997C4.75 10.974 4.887 11.9167 5.13847 12.8021L7.75549 11.3995C7.66982 11.0858 7.58784 10.741 7.58784 9.99997C7.58784 8.24357 8.35821 6.67104 9.68965 5.56832L6.96482 2.84348C5.2323 4.41595 4.75 7.0396 4.75 9.99997Z" clip-rule="evenodd" fill-rule="evenodd"/>
          <path d="M22.25 10C22.25 11.9604 21.6881 14.1568 20.3607 16.3607L18.0625 14.0625C19.2605 12.6377 19.8291 11.2335 19.8291 10C19.8291 8.35848 19.2605 6.7552 18.0625 5.33045L20.3607 3.03225C21.6881 5.23616 22.25 7.43261 22.25 10Z" clip-rule="evenodd" fill-rule="evenodd"/>
          <path d="M12.0003 19.25C14.7397 19.25 17.0664 18.2329 18.667 16.2925L20.6125 18.238C18.667 20.1425 15.6033 21.25 12.0003 21.25C7.02705 21.25 4.24689 19.9665 2.36865 17.7355L5.09348 15.0107C6.647 16.9788 9.0935 18.25 12.0003 18.25C14.1997 18.25 16.1532 17.4767 17.625 16.1538L16.2163 17.4116L18.9163 17.2916L17.625 18.25L12.0003 19.25Z" clip-rule="evenodd" fill-rule="evenodd"/>
        </svg>
        Login with Google
      </button>
      <button class="w-full sm:w-auto bg-blue-800 hover:bg-blue-900 dark:bg-blue-700 dark:hover:bg-blue-800 text-white font-bold py-2 px-4 rounded-md flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-blue-800 dark:focus:ring-blue-600 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-200">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
          <path d="M14 13.5h2.7L17 10h-3V7.9c0-.8.2-1.3 1.3-1.3H17V4.3c-.4 0-1.7-.1-2.9-.1-3.1 0-5.2 1.9-5.2 5.3v2.7H7v3h2.1V22h4.9v-8.5z"/>
        </svg>
        Login with Facebook
      </button>
    </div>
  </div>
</div>

파스텔 색상, 반응형 및 다크 모드를 지원하는 소셜 미디어용 스큐어모픽 로그인 양식. 이 양식은 입력과 버튼에 미묘한 3D 효과를 주어 물리적 요소를 모방합니다. 그림자와 그라디언트는 스큐어모픽 느낌을 향상시키는 데 사용됩니다. 입력에는 부드러운 삽입 그림자가 있고 버튼은 돌출되어 클릭할 수 있는 모양입니다. 파스텔 색 구성표는 어두운 모드에서 더 어둡고 음소거된 버전으로 부드럽게 전환되어 가독성과 시각적 편안함을 유지합니다. 반응형 디자인은 여러 장치에서 사용성을 보장합니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-200 via-purple-200 to-pink-200 dark:from-gray-800 dark:via-gray-900 dark:to-black p-4">
  <div class="bg-white dark:bg-gray-700 p-8 rounded-xl shadow-2xl w-full max-w-md
              transform transition-all duration-300 ease-in-out
              hover:shadow-3xl hover:-translate-y-1
              ring-4 ring-indigo-300/50 dark:ring-gray-600/50
              relative overflow-hidden">

    <!-- Skeuomorphic "Glass" Effect Overlay -->
    <div class="absolute inset-0 bg-white/20 dark:bg-gray-800/20 backdrop-blur-sm rounded-xl
                transform -rotate-3 translate-x-2 translate-y-2 opacity-0 group-hover:opacity-100 transition duration-500 ease-in-out"></div>

    <h2 class="text-3xl font-extrabold text-gray-800 dark:text-white text-center mb-8
               drop-shadow-lg [text-shadow:0px_2px_4px_var(--tw-shadow-color)] shadow-indigo-300/50 dark:shadow-purple-400/30">
      Welcome Back!
    </h2>

    <form class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2
                                  [text-shadow:0px_1px_2px_var(--tw-shadow-color)] shadow-white/50 dark:shadow-gray-900/50">
          Email
        </label>
        <div class="relative">
          <input type="email" id="email" name="email" autocomplete="email"
                 class="mt-1 block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-inner-lg
                        bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100
                        focus:ring-2 focus:ring-indigo-400 focus:border-transparent
                        transition duration-200 ease-in-out
                        [box-shadow:inset_0px_2px_4px_rgba(0,0,0,0.06),0px_1px_0px_rgba(255,255,255,0.8)]
                        dark:[box-shadow:inset_0px_2px_4px_rgba(0,0,0,0.6),0px_1px_0px_rgba(255,255,255,0.05)]"
                 placeholder="[email protected]">
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
            <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20">
              <path d="M2.003 5.884L10 10.49l7.997-4.606A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
              <path d="M18 8.118l-8 4.615-8-4.615V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
            </svg>
          </div>
        </div>
      </div>

      <div>
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2
                                     [text-shadow:0px_1px_2px_var(--tw-shadow-color)] shadow-white/50 dark:shadow-gray-900/50">
          Password
        </label>
        <div class="relative">
          <input type="password" id="password" name="password" autocomplete="current-password"
                 class="mt-1 block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-inner-lg
                        bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100
                        focus:ring-2 focus:ring-indigo-400 focus:border-transparent
                        transition duration-200 ease-in-out
                        [box-shadow:inset_0px_2px_4px_rgba(0,0,0,0.06),0px_1px_0px_rgba(255,255,255,0.8)]
                        dark:[box-shadow:inset_0px_2px_4px_rgba(0,0,0,0.6),0px_1px_0px_rgba(255,255,255,0.05)]"
                 placeholder="••••••••">
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
            <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20">
              <path d="M10 2a5 5 0 00-5 5v2a2 2 0 00-2 2v5a2 2 0 002 2h10a2 2 0 002-2v-5a2 2 0 00-2-2H7V7a3 3 0 016 0v2h-2V7a1 1 0 00-1-1zm-4 8h8v7H6v-7z"></path>
            </svg>
          </div>
        </div>
      </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-indigo-600 dark:text-indigo-400 rounded
                        focus:ring-indigo-500 dark:focus:ring-indigo-300
                        ring-offset-white dark:ring-offset-gray-700
                        border-gray-300 dark:border-gray-600
                        cursor-pointer
                        [box-shadow:0px_1px_2px_rgba(0,0,0,0.1)] dark:[box-shadow:0px_1px_2px_rgba(0,0,0,0.4)]">
          <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-200
                                          [text-shadow:0px_1px_1px_var(--tw-shadow-color)] shadow-white/50 dark:shadow-gray-900/50">
            Remember me
          </label>
        </div>

        <div class="text-sm">
          <a href="#" class="font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300
                           [text-shadow:0px_1px_1px_var(--tw-shadow-color)] shadow-indigo-300/50 dark:shadow-purple-400/30">
            Forgot your password?
          </a>
        </div>
      </div>

      <div>
        <button type="submit"
                class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg
                       text-lg font-semibold text-white
                       bg-gradient-to-r from-indigo-500 to-purple-500
                       hover:from-indigo-600 hover:to-purple-600
                       focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-gray-300
                       transition duration-200 ease-in-out
                       transform active:scale-98 active:shadow-md
                       [box-shadow:0px_4px_8px_rgba(0,0,0,0.2),inset_0px_1px_0px_rgba(255,255,255,0.4)]
                       dark:[box-shadow:0px_4px_8px_rgba(0,0,0,0.6),inset_0px_1px_0px_rgba(255,255,255,0.1)]">
          Sign In
        </button>
      </div>
    </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="font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300
                           [text-shadow:0px_1px_1px_var(--tw-shadow-color)] shadow-indigo-300/50 dark:shadow-purple-400/30">
          Sign Up
        </a>
      </p>
    </div>
  </div>
</div>

로그인 양식 구성 요소

마이크로 인터랙션과 유사한 색 구성표가 있는 복잡하고 반응이 빠른 로그인 양식 구성 요소로, 비즈니스/기업 웹 사이트에 적합합니다. 다크 모드를 지원하고 스타일링에 Tailwind CSS를 사용합니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-2xl flex flex-col md:flex-row w-full max-w-4xl overflow-hidden">

    <!-- Image Section -->
    <div class="md:w-1/2 p-0 relative">
      <img src="https://picsum.photos/800/600?random=1" alt="Login Illustration" class="w-full h-full object-cover">
      <div class="absolute inset-0 bg-gradient-to-t from-purple-800 to-transparent opacity-75"></div>
      <div class="absolute bottom-6 left-6 text-white text-3xl font-bold">Welcome Back!</div>
    </div>

    <!-- Login Form Section -->
    <div class="md:w-1/2 p-8 md:p-12 space-y-8 flex flex-col justify-center">
      <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white text-center">Login to Your Account</h2>

      <form class="space-y-6">

        <!-- Email Input with Microinteraction -->
        <div class="relative group">
          <input type="email" id="email" class="peer h-12 w-full border-b-2 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white placeholder-transparent focus:outline-none focus:border-purple-600 dark:focus:border-purple-400 bg-transparent" placeholder="Email address" />
          <label for="email" class="absolute left-0 -top-3.5 text-gray-600 dark:text-gray-400 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-3 peer-focus:-top-3.5 peer-focus:text-purple-600 dark:peer-focus:text-purple-400 peer-focus:text-sm">Email address</label>
          <svg class="absolute right-3 top-3 text-gray-400 dark:text-gray-500 group-focus-within:text-purple-600 dark:group-focus-within:text-purple-400 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
        </div>

        <!-- Password Input with Microinteraction -->
        <div class="relative group animate-fade-in-up">
          <input type="password" id="password" class="peer h-12 w-full border-b-2 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white placeholder-transparent focus:outline-none focus:border-purple-600 dark:focus:border-purple-400 bg-transparent" placeholder="Password" />
          <label for="password" class="absolute left-0 -top-3.5 text-gray-600 dark:text-gray-400 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-3 peer-focus:-top-3.5 peer-focus:text-purple-600 dark:peer-focus:text-purple-400 peer-focus:text-sm">Password</label>
          <svg class="absolute right-3 top-3 text-gray-400 dark:text-gray-500 group-focus-within:text-purple-600 dark:group-focus-within:text-purple-400 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
        </div>

        <!-- Remember Me & Forgot Password -->
        <div class="flex items-center justify-between text-sm">
          <div class="flex items-center">
            <input id="remember_me" name="remember_me" type="checkbox" class="h-4 w-4 text-purple-600 dark:text-purple-400 focus:ring-purple-500 border-gray-300 rounded dark:border-gray-600">
            <label for="remember_me" class="ml-2 block text-gray-900 dark:text-gray-300">Remember me</label>
          </div>
          <a href="#" class="font-medium text-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-300 transition-colors duration-200">Forgot your password?</a>
        </div>

        <!-- Login Button with Microinteraction -->
        <div>
          <button type="submit" class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-lg font-medium rounded-md text-white bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:focus:ring-offset-gray-800 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
            <span class="absolute left-0 inset-y-0 flex items-center pl-3">
              <svg class="h-6 w-6 text-purple-200 group-hover:text-purple-100 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
              </svg>
            </span>
            Sign in
          </button>
        </div>
      </form>

      <!-- Social Login Options (Example Microinteraction) -->
      <div class="relative">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-300 dark:border-gray-700"></div>
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">Or continue with</span>
        </div>
      </div>

      <div class="flex justify-center space-x-4">
        <button class="flex items-center justify-center p-3 border border-gray-300 dark:border-gray-600 rounded-full shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800 transform hover:-translate-y-1 transition-transform duration-200">
          <img class="h-5 w-5 mr-2" src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" alt="Google">
          Google
        </button>
        <button class="flex items-center justify-center p-3 border border-gray-300 dark:border-gray-600 rounded-full shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 transform hover:-translate-y-1 transition-transform duration-200">
          <img class="h-5 w-5 mr-2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Facebook_Logo_%282019%29.png/1200px-Facebook_Logo_%282019%29.png" alt="Facebook">
          Facebook
        </button>
      </div>

      <div class="text-center text-sm text-gray-600 dark:text-gray-400 mt-6">
        Don't have an account? 
        <a href="#" class="font-medium text-purple-600 dark:text-purple-400 hover:text-purple-500 dark:hover:text-purple-300 transition-colors duration-200">Sign up</a>
      </div>

    </div>
  </div>
</div>

<!-- To enable micro-interactions, you would typically use JavaScript. 
     However, for the purpose of this request, some CSS-only micro-interactions 
     are simulated using Tailwind's `group` and `peer` modifiers, 
     and `hover` / `active` / `focus` pseudo-classes for basic animations. 
     More complex animations would require a JS framework like React/Vue/Angular, 
     or plain JS with Web Animations API or CSS keyframe animations. -->

로그인 양식 구성 요소

스큐어모픽 디자인, 단색 색 구성표 및 어두운 테마 지원을 갖춘 반응형 로그인 양식 구성 요소로 비즈니스 웹 사이트에 적합합니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center bg-gray-200 dark:bg-gray-900 p-4">
  <div class="bg-white dark:bg-gray-800 p-10 rounded-xl shadow-2xl w-full max-w-md transform transition-all duration-300 hover:scale-105 border-t-4 border-blue-500 dark:border-blue-700">
    <h2 class="text-4xl font-extrabold text-center text-gray-800 dark:text-white mb-8">
      <span class="block">Welcome Back!</span>
      <span class="block text-blue-500 dark:text-blue-400 text-2xl mt-2">Login to your account</span>
    </h2>
    <form class="space-y-6">
      <div class="relative">
        <input type="email" id="email" class="block w-full px-4 py-3 rounded-lg text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 shadow-inner appearance-none transition-all duration-300 peer placeholder-transparent" placeholder=" "/>
        <label for="email" class="absolute left-4 -top-2.5 text-gray-600 dark:text-gray-300 text-sm bg-gray-100 dark:bg-gray-700 px-1 transition-all duration-300 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-3.5 peer-focus:-top-2.5 peer-focus:text-blue-600 dark:peer-focus:text-blue-400 peer-focus:text-sm">Email Address</label>
      </div>
      <div class="relative">
        <input type="password" id="password" class="block w-full px-4 py-3 rounded-lg text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-400 dark:focus:ring-blue-400 shadow-inner appearance-none transition-all duration-300 peer placeholder-transparent" placeholder=" "/>
        <label for="password" class="absolute left-4 -top-2.5 text-gray-600 dark:text-gray-300 text-sm bg-gray-100 dark:bg-gray-700 px-1 transition-all duration-300 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-3.5 peer-focus:-top-2.5 peer-focus:text-blue-600 dark:peer-focus:text-blue-400 peer-focus:text-sm">Password</label>
      </div>
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember_me" name="remember_me" type="checkbox" class="h-5 w-5 text-blue-600 dark:text-blue-500 rounded border-gray-300 dark:border-gray-600 focus:ring-blue-500 dark:focus:ring-blue-400">
          <label for="remember_me" class="ml-3 block text-base text-gray-700 dark:text-gray-300">Remember me</label>
        </div>
        <div class="text-base">
          <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-300">Forgot your password?</a>
        </div>
      </div>
      <div>
        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg text-lg font-semibold text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-400 dark:focus:ring-offset-gray-800 transition-all duration-300 transform hover:-translate-y-1 active:translate-y-0 active:shadow-inner-blue-800 skew-y-1 hover:skew-y-0">
          <span class="">Sign in</span>
          <svg class="ml-3 w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        </button>
      </div>
    </form>
    <div class="mt-8 text-center">
      <p class="text-base text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-300">Sign up</a></p>
    </div>
  </div>
</div>

로그인 양식 구성 요소

생생한 색상과 적당한 복잡성으로 설계된 스큐어모픽 로그인 양식 구성 요소로, 포트폴리오에 적합합니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8 max-w-md w-full">
        <h2 class="text-3xl font-bold text-center text-vibrant-600 dark:text-vibrant-300 mb-6">Login</h2>
        <img src="https://picsum.photos/200/100" alt="Decorative Header Image" class="rounded-lg w-full mb-4" />
        <form>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input type="email" id="email" name="email" class="border border-gray-300 dark:border-gray-700 rounded-lg p-2 focus:outline-none focus:ring focus:ring-vibrant-300 dark:focus:ring-vibrant-500 w-full" required />
            </div>
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input type="password" id="password" name="password" class="border border-gray-300 dark:border-gray-700 rounded-lg p-2 focus:outline-none focus:ring focus:ring-vibrant-300 dark:focus:ring-vibrant-500 w-full" required />
            </div>
            <button type="submit" class="bg-vibrant-600 dark:bg-vibrant-500 text-white font-bold py-2 rounded-lg w-full hover:bg-vibrant-700 dark:hover:bg-vibrant-400 transition duration-300 ease-in-out">Log In</button>
        </form>
        <div class="flex items-center justify-between mt-4">
            <a href="#" class="text-sm text-vibrant-600 dark:text-vibrant-300 hover:underline">Forgot Password?</a>
            <a href="#" class="text-sm text-vibrant-600 dark:text-vibrant-300 hover:underline">Sign Up</a>
        </div>
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-16 h-16 mx-auto mt-4" />
    </div>
</div>

로그인 양식 구성 요소

머티리얼 디자인 원칙에 따라 디자인되고 Tailwind CSS를 사용하여 스타일이 지정된 반응형 로그인 양식 구성 요소입니다. 어스 톤 색 구성표와 블로그 또는 콘텐츠 소비 플랫폼에 적합한 간단한 레이아웃이 특징이며 어두운 테마를 지원합니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-6">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8 w-full max-w-md">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6 text-center">Login</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600" 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="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600" placeholder="••••••••" required>
            </div>
            <div class="flex items-center justify-between">
                <button type="submit" class="bg-green-500 hover:bg-green-400 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Login</button>
            </div>
        </form>
        <p class="mt-4 text-center text-gray-600 dark:text-gray-400">
            Don’t have an account? <a href="#" class="text-green-500 hover:text-green-400">Sign up</a>
        </p>
    </div>
</div>