카테고리

구성 요소 로그인/가입

로그인/가입

사용자 계정 액세스 구성 요소User account access componentsUser

Retro Dashboard 로그인/가입

레트로/빈티지 테마의 로그인 및 대시보드에 대한 가입 구성 요소로, 복잡한 레이아웃과 트라이어딕 색 구성표가 있습니다. Tailwind CSS를 사용한 반응형 디자인 및 다크 모드 지원이 포함됩니다.

                <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-amber-200 via-red-400 to-rose-600 dark:from-gray-800 dark:via-gray-900 dark:to-black p-6">
  <div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-lg w-full max-w-md filter drop-shadow-lg transform rotate-2 transition duration-500 hover:rotate-0">
    <div class="mb-8 text-center">
      <h2 class="text-3xl font-bold text-gray-800 dark:text-white font-mono">Dashboard Access</h2>
      <p class="text-gray-600 dark:text-gray-300 mt-2">Enter your credentials to dive in!</p>
    </div>

    <div class="tabs">
      <input type="radio" name="tabs" id="login" checked class="hidden">
      <label for="login" class="tab-label inline-block px-4 py-2 text-gray-700 dark:text-gray-200 font-semibold border-b-2 border-transparent hover:border-rose-500 cursor-pointer transition duration-300">Login</label>

      <input type="radio" name="tabs" id="signup" class="hidden">
      <label for="signup" class="tab-label inline-block px-4 py-2 text-gray-700 dark:text-gray-200 font-semibold border-b-2 border-transparent hover:border-rose-500 cursor-pointer transition duration-300">Sign Up</label>

      <div id="tab-content-login" class="mt-8 tab-content">
        <form>
          <div class="mb-5">
            <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" class="form-input w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-rose-500 focus:border-rose-500 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400" placeholder="[email protected]">
          </div>
          <div class="mb-5">
            <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" class="form-input w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-rose-500 focus:border-rose-500 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400" placeholder="********">
          </div>
          <div class="flex items-center justify-between mb-6">
            <div class="flex items-center">
              <input type="checkbox" id="remember" class="form-checkbox h-4 w-4 text-rose-600 dark:text-rose-400 rounded">
              <label for="remember" class="ml-2 block text-sm text-gray-800 dark:text-gray-200">Remember me</label>
            </div>
            <a href="#" class="text-sm text-rose-600 dark:text-rose-400 hover:underline">Forgot Password?</a>
          </div>
          <button type="submit" class="w-full bg-rose-500 hover:bg-rose-600 text-white font-bold py-2 px-4 rounded-md transition duration-300">Login</button>
        </form>
      </div>

      <div id="tab-content-signup" class="mt-8 tab-content hidden">
        <form>
           <div class="mb-5">
            <label for="new-email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Email Address</label>
            <input type="email" id="new-email" class="form-input w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-rose-500 focus:border-rose-500 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400" placeholder="[email protected]">
          </div>
           <div class="mb-5">
            <label for="new-password" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Password</label>
            <input type="password" id="new-password" class="form-input w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-rose-500 focus:border-rose-500 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400" placeholder="********">
          </div>
           <div class="mb-5">
            <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Confirm Password</label>
            <input type="password" id="confirm-password" class="form-input w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-rose-500 focus:border-rose-500 bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400" placeholder="********">
          </div>
          <button type="submit" class="w-full bg-amber-400 hover:bg-amber-500 text-white font-bold py-2 px-4 rounded-md transition duration-300">Sign Up</button>
        </form>
      </div>
    </div>
  </div>
</div>

<style>
  /* Basic tab functionality (can be improved with JS) */
  .tabs input:checked + .tab-label {
    border-color: #f43f5e; /* rose-500 */
  }

  .tabs input:checked ~ .tab-content {
    display: block;
  }

  /* Hide inactive tab content */
  .tab-content {
    display: none;
  }
</style>

로그인/가입 구성 요소

Tailwind CSS를 사용하여 다크 모드를 위해 설계된 반응형 로그인/가입 구성 요소입니다.

미리보기 열기

                <div class="min-h-screen flex items-center justify-center bg-gray-900 p-6">
    <div class="bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full">
        <h2 class="text-2xl text-white text-center mb-6">Welcome</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="email">Email</label>
                <input class="w-full p-3 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-blue-500" type="email" id="email" placeholder="Enter your email" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="password">Password</label>
                <input class="w-full p-3 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-blue-500" type="password" id="password" placeholder="Enter your password" required>
            </div>
            <button class="w-full bg-blue-600 text-white p-3 rounded hover:bg-blue-500 transition duration-300" type="submit">Login</button>
        </form>
        <div class="text-center text-gray-400 mt-4">
            <p>Don't have an account? <a href="#" class="text-blue-400">Sign up</a></p>
        </div>
    </div>
    <div class="bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full mt-8">
        <h2 class="text-2xl text-white text-center mb-6">Sign Up</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="name">Name</label>
                <input class="w-full p-3 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-blue-500" type="text" id="name" placeholder="Enter your name" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="email-signup">Email</label>
                <input class="w-full p-3 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-blue-500" type="email" id="email-signup" placeholder="Enter your email" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="password-signup">Password</label>
                <input class="w-full p-3 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-blue-500" type="password" id="password-signup" placeholder="Create a password" required>
            </div>
            <button class="w-full bg-blue-600 text-white p-3 rounded hover:bg-blue-500 transition duration-300" type="submit">Sign Up</button>
        </form>
    </div>
</div>

로그인/가입 구성 요소

Tailwind CSS로 설계된 미니멀한 로그인/가입 구성 요소로, 반응형 효과와 어두운 테마 지원을 특징으로 합니다. 이 구성 요소는 깨끗하고 단순한 미학을 제공하는 동시에 다양한 장치에서 사용성을 보장합니다.

미리보기 열기

                <div class="min-h-screen flex items-center justify-center bg-white dark:bg-gray-900">
  <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center">Welcome Back</h2>
    <p class="text-gray-600 dark:text-gray-400 text-center mb-6">Login to your account</p>
    <form>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
        <input class="block w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" type="email" id="email" placeholder="[email protected]" required />
      </div>
      <div class="mb-6">
        <label class="block text-gray-700 dark:text-gray-300" for="password">Password</label>
        <input class="block w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" type="password" id="password" placeholder="********" required />
      </div>
      <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 rounded-md transition duration-200">Login</button>
    </form>
    <div class="mt-4 text-center">
      <p class="text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a></p>
    </div>
  </div>
</div>

<div class="min-h-screen flex items-center justify-center bg-white dark:bg-gray-900">
  <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full mt-8">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center">Create Account</h2>
    <p class="text-gray-600 dark:text-gray-400 text-center mb-6">Join us today!</p>
    <form>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300" for="name">Name</label>
        <input class="block w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" type="text" id="name" placeholder="John Doe" required />
      </div>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300" for="email-signup">Email</label>
        <input class="block w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" type="email" id="email-signup" placeholder="[email protected]" required />
      </div>
      <div class="mb-6">
        <label class="block text-gray-700 dark:text-gray-300" for="password-signup">Password</label>
        <input class="block w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" type="password" id="password-signup" placeholder="********" required />
      </div>
      <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 rounded-md transition duration-200">Sign Up</button>
    </form>
    <div class="mt-4 text-center">
      <p class="text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="text-blue-500 hover:underline">Login</a></p>
    </div>
  </div>
</div>

로그인/가입 구성 요소

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 rounded-lg shadow-lg p-6 w-72">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4 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 class="w-full px-3 py-2 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="email" id="email" 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 class="w-full px-3 py-2 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="password" id="password" placeholder="••••••••" required>
      </div>
      <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-600 dark:hover:bg-blue-700" type="submit">Login</button>
      <p class="mt-4 text-center text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-500 hover:text-blue-600">Sign up</a></p>
    </form>
  </div>
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 w-72 mt-8">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4 text-center">Sign Up</h2>
    <form>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
        <input class="w-full px-3 py-2 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="name" placeholder="John Doe" required>
      </div>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email-signup">Email</label>
        <input class="w-full px-3 py-2 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="email" id="email-signup" placeholder="[email protected]" required>
      </div>
      <div class="mb-6">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password-signup">Password</label>
        <input class="w-full px-3 py-2 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="password" id="password-signup" placeholder="••••••••" required>
      </div>
      <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-600 dark:hover:bg-blue-700" type="submit">Sign Up</button>
      <p class="mt-4 text-center text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="text-blue-500 hover:text-blue-600">Login</a></p>
    </form>
  </div>
  <div class="hidden">
    <img src="https://picsum.photos/600/400?random=1" alt="Placeholder" class="w-full h-auto">
    <img src="https://picsum.photos/600/400?random=2" alt="Placeholder" class="w-full h-auto">
    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16">
  </div>
</div>

로그인/가입 구성 요소

미니멀하고 평평한 디자인의 로그인/가입 구성 요소로, 반응형 효과와 어두운 테마를 지원하며 Tailwind CSS를 사용합니다.

미리보기 열기

                <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 rounded-lg shadow-lg p-8 max-w-sm w-full">
        <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200 mb-6">Welcome</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="username">Username</label>
                <input type="text" id="username" class="border border-gray-300 dark:border-gray-700 rounded-lg w-full py-2 px-3 bg-gray-50 dark:bg-gray-700 focus:outline-none focus:ring focus:ring-blue-500" placeholder="Enter your username" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input type="password" id="password" class="border border-gray-300 dark:border-gray-700 rounded-lg w-full py-2 px-3 bg-gray-50 dark:bg-gray-700 focus:outline-none focus:ring focus:ring-blue-500" placeholder="Enter your password" required>
            </div>
            <div class="mb-6">
                <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-lg">Login</button>
            </div>
            <div class="text-center mb-4">
                <span class="text-gray-600 dark:text-gray-400">Or</span>
            </div>
            <div class="mb-6">
                <button type="button" class="w-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-bold py-2 rounded-lg">Signup</button>
            </div>
            <div class="text-center">
                <img class="rounded-full w-16 h-16 mx-auto" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            </div>
            <p class="text-center text-gray-500 dark:text-gray-400 mt-4">Need help? <a href="#" class="text-blue-500 hover:underline">Contact us</a></p>
        </form>
    </div>
</div>
<style>
@media (prefers-color-scheme: dark) {
    input:focus {
        background-color: #4A5568;
    }
    button {
        transition: background-color 0.3s;
    }
}
</style>

로그인/가입 구성 요소

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 shadow-md rounded-lg p-8 max-w-sm w-full">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Login / Signup</h2>
    <form>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="username">Username</label>
        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-white dark:bg-gray-700 focus:outline-none focus:shadow-outline"
          id="username" type="text" placeholder="Enter your username" required>
      </div>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="email">Email</label>
        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-white dark:bg-gray-700 focus:outline-none focus:shadow-outline"
          id="email" type="email" placeholder="Enter your email" required>
      </div>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="password">Password</label>
        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-white dark:bg-gray-700 focus:outline-none focus:shadow-outline"
          id="password" type="password" placeholder="Enter your password" required>
      </div>
      <div class="flex items-center justify-between mb-4">
        <label class="flex items-center">
          <input type="checkbox" class="form-checkbox h-5 w-5 text-gray-600 dark:text-gray-400">
          <span class="ml-2 text-gray-700 dark:text-gray-300">Remember Me</span>
        </label>
        <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800 dark:text-blue-300" href="#">
          Forgot Password?
        </a>
      </div>
      <div class="flex items-center justify-center">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
          Login / Signup
        </button>
      </div>
    </form>
    <div class="mt-4 text-center">
      <p class="text-gray-600 dark:text-gray-400">or</p>
      <button class="flex items-center justify-center mt-2 border border-gray-300 dark:border-gray-600 rounded-lg py-2 px-4 w-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
        <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-2">
        Sign in with Google
      </button>
    </div>
  </div>
</div>

로그인/가입 구성 요소 12

다크 모드 스타일로 설계된 반응형 로그인/가입 구성 요소로, 스타일링을 위해 Tailwind CSS를 사용합니다.

미리보기 열기

                <div class="min-h-screen flex items-center justify-center bg-gray-900 p-5">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6 w-full max-w-md">
        <h2 class="text-2xl font-bold text-white text-center">Welcome</h2>
        <p class="text-gray-400 text-center mb-6">Please login or signup to continue</p>
        <div class="mb-4">
            <label class="block text-gray-300 mb-1" for="email">Email</label>
            <input class="w-full bg-gray-700 text-white rounded border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 p-2" type="email" id="email" placeholder="Enter your email" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-300 mb-1" for="password">Password</label>
            <input class="w-full bg-gray-700 text-white rounded border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 p-2" type="password" id="password" placeholder="Enter your password" required />
        </div>
        <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">Login</button>
        <div class="flex items-center justify-between my-4">
            <hr class="w-1/4 border-gray-600">
            <span class="text-gray-400">or</span>
            <hr class="w-1/4 border-gray-600">
        </div>
        <button class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-green-500">Signup</button>
        <p class="text-gray-400 text-center mt-4">Already have an account? <a href="#" class="text-blue-400">Login</a></p>
        <p class="text-gray-400 text-center">Need an account? <a href="#" class="text-green-400">Signup</a></p>
    </div>
</div>