구성 요소 로그인 양식 RetroLoginForm컴포넌트

RetroLoginForm컴포넌트

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

미리 보기

HTML 코드

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

관련 구성 요소

로그인 양식 구성 요소

흙색의 브루탈리즘 스타일로 디자인된 간단한 로그인 양식 구성 요소로, 블로그/콘텐츠 목적에 적합하며 밝은 테마와 어두운 테마 모두에 최적화되어 있습니다.

열다

로그인 양식 구성 요소

glassmorphism으로 스타일링된 반응형 로그인 양식 구성 요소로, 흐림 효과와 어두운 테마를 지원하는 반투명 요소를 특징으로 합니다.

열다

브루탈리스트 로그인 양식

기술/SaaS 애플리케이션용으로 설계된 단순하고 잔인한 스타일의 로그인 양식 구성 요소로, 고대비, 대담한 타이포그래피, 완전한 응답성 및 다크 모드 지원을 갖춘 유사한 색 구성표를 특징으로 합니다.

열다