검색 구성 요소

카테고리

구성 요소 인증 구성 요소

인증 구성 요소

사용자 인증 및 보안과 관련된 구성 요소

Bauhaus 데이트 인증

데이트/소셜 플랫폼을 위한 중간 정도의 복잡성 인증 구성 요소로, Bauhaus에서 영감을 받은 디자인과 유사한 색 구성표를 특징으로 합니다. 반응이 빠르며 다크 모드 지원이 포함되어 있습니다.

                <div class="min-h-screen flex items-center justify-center p-4 bg-gray-50 dark:bg-gray-900 font-sans">

  <!-- Main Container -->
  <div class="bg-white dark:bg-gray-800 shadow-2xl rounded-lg p-8 max-w-sm w-full transform transition-all duration-300 ease-in-out hover:scale-105 border-4 border-yellow-400 dark:border-red-600">
    
    <!-- Header -->
    <div class="text-center mb-8">
      <div class="w-16 h-16 bg-red-500 rounded-full mx-auto flex items-center justify-center mb-4 text-white text-3xl font-bold dark:bg-red-700 transform rotate-45">
        <span class="transform -rotate-45">❤️</span>
      </div>
      <h2 class="text-3xl font-extrabold text-gray-900 dark:text-gray-100 mb-2 tracking-wide">
        MatchPoint
      </h2>
      <p class="text-md text-gray-600 dark:text-gray-400">
        Find your perfect connection.
      </p>
    </div>

    <!-- Tabs for Login/Signup -->
    <div class="flex mb-6 bg-gray-100 dark:bg-gray-700 rounded-lg p-1">
      <button class="flex-1 py-3 px-4 text-center text-md font-semibold rounded-md transition-colors duration-200 ease-in-out bg-yellow-400 text-gray-900 dark:bg-yellow-600 dark:text-white">
        Login
      </button>
      <button class="flex-1 py-3 px-4 text-center text-md font-medium text-gray-700 dark:text-gray-300 rounded-md transition-colors duration-200 ease-in-out hover:bg-gray-200 dark:hover:bg-gray-600">
        Sign Up
      </button>
    </div>

    <!-- Form Area -->
    <form class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-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 border border-gray-300 rounded-md shadow-sm placeholder-gray-400
                      focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500
                      bg-gray-50 text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:placeholder-gray-400
                      sm:text-sm transition-colors duration-200">
      </div>

      <div>
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-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 border border-gray-300 rounded-md shadow-sm placeholder-gray-400
                      focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500
                      bg-gray-50 text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:placeholder-gray-400
                      sm:text-sm transition-colors duration-200">
      </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-red-500 focus:ring-red-500 border-gray-300 rounded dark:border-gray-600 dark:bg-gray-700">
          <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-red-600 hover:text-red-500 dark:text-red-400 dark:hover:text-red-300 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-bold text-white
                       bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500
                       dark:bg-red-700 dark:hover:bg-red-600 dark:focus:ring-red-700 transition-colors duration-200 transform hover:-translate-y-0.5">
          Sign In
        </button>
      </div>
    </form>

    <!-- Separator -->
    <div class="mt-8 relative">
      <div class="absolute inset-0 flex items-center">
        <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 text-gray-500 dark:bg-gray-800 dark:text-gray-400">
          Or continue with
        </span>
      </div>
    </div>

    <!-- Social Login Buttons -->
    <div class="mt-6 grid grid-cols-2 gap-3">
      <div>
        <button type="button"
                class="w-full inline-flex justify-center py-3 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700
                       bg-yellow-100 hover:bg-yellow-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500
                       dark:bg-yellow-800 dark:border-yellow-700 dark:text-white dark:hover:bg-yellow-900
                       transition-colors duration-200">
          <svg class="w-5 h-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 18H11.5v-6H10v-2.25h1.5V8.5c0-1.298.591-2.022 2.05-2.022h2.25v2.25h-1.5c-.3 0-.75.075-.75.75v1.072h2.25l-.3 2.25h-1.95V18z" />
          </svg>
          Facebook
        </button>
      </div>
      <div>
        <button type="button"
                class="w-full inline-flex justify-center py-3 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700
                       bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
                       dark:bg-blue-800 dark:border-blue-700 dark:text-white dark:hover:bg-blue-900
                       transition-colors duration-200">
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.35C0 23.407.593 24 1.325 24h21.35c.732 0 1.325-.593 1.325-1.325V1.325C24 .593 23.407 0 22.675 0zM7.5 20.5H4V9h3.5v11.5zM5.75 7.5a1.75 1.75 0 110-3.5 1.75 1.75 0 010 3.5zm14 13H17V14c0-1.85-.82-2.93-2.16-2.93C13.56 11.07 13 12.06 13 13.5v7H9.5V9h3.5v1.5c.57-.96 1.48-1.52 2.7-1.52C17.26 9 18 10.3 18 13.2V20.5h2.5V13.2c0-3.26-2.12-4.7-4.9-4.7-2.3 0-3.9 1.25-4.13 2.1z" />
          </svg>
          LinkedIn
        </button>
      </div>
    </div>
  </div>
</div>

Skeuomorphic_Monochromatic_Auth_E 상거래

전자 상거래 애플리케이션을 위한 복잡하고 스큐어모픽한 단색 인증 구성 요소로, 여러 대화형 요소와 다크 모드를 지원하는 반응형 디자인을 특징으로 합니다. 디지털 컨트롤을 사용하여 실제 인터페이스를 모방합니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-zinc-900 dark:to-zinc-800 font-sans">
  <div class="w-full max-w-md mx-auto bg-gradient-to-br from-gray-100 to-gray-300 dark:from-zinc-700 dark:to-zinc-900 rounded-3xl shadow-xl border border-gray-300 dark:border-zinc-700 p-8 transform transition-all duration-300 hover:shadow-2xl hover:scale-102">
    <div class="text-center mb-8">
      <svg class="mx-auto h-16 w-16 text-gray-700 dark:text-gray-300 mb-4" 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="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"></path>
      </svg>
      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-2 drop-shadow-sm">Welcome Back!</h2>
      <p class="text-gray-600 dark:text-gray-400 text-sm">Manage your e-commerce experience.</p>
    </div>

    <div class="grid grid-cols-1 gap-6">
      <div class="relative">
        <input type="email" id="email" placeholder="" class="peer block w-full px-4 py-3 rounded-xl bg-gray-200 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-700 shadow-inner focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-zinc-600 text-gray-800 dark:text-gray-200 placeholder-transparent transition-all duration-200" />
        <label for="email" class="absolute left-4 -top-2 text-xs text-gray-500 dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 px-1 transition-all duration-200 origin-left transform -translate-y-1/2 scale-75 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-1/2 peer-focus:bg-gray-200 dark:peer-focus:bg-zinc-800 peer-focus:text-gray-700 dark:peer-focus:text-gray-300 leading-none pointer-events-none">
          Email Address
        </label>
      </div>
      <div class="relative">
        <input type="password" id="password" placeholder="" class="peer block w-full px-4 py-3 rounded-xl bg-gray-200 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-700 shadow-inner focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-zinc-600 text-gray-800 dark:text-gray-200 placeholder-transparent transition-all duration-200" />
        <label for="password" class="absolute left-4 -top-2 text-xs text-gray-500 dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 px-1 transition-all duration-200 origin-left transform -translate-y-1/2 scale-75 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-1/2 peer-focus:bg-gray-200 dark:peer-focus:bg-zinc-800 peer-focus:text-gray-700 dark:peer-focus:text-gray-300 leading-none pointer-events-none">
          Password
        </label>
      </div>
    </div>

    <div class="flex items-center justify-between text-sm mt-4">
      <div class="flex items-center">
        <input id="remember_me" name="remember_me" type="checkbox" class="h-4 w-4 rounded border-gray-300 dark:border-zinc-700 bg-gray-200 dark:bg-zinc-800 text-gray-600 dark:text-gray-400 focus:ring-gray-500 dark:focus:ring-zinc-500 transition-colors duration-200">
        <label for="remember_me" class="ml-2 block text-gray-700 dark:text-gray-300">
          Remember me
        </label>
      </div>
      <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors duration-200">
        Forgot Password?
      </a>
    </div>

    <button type="submit" class="w-full flex justify-center py-3 px-4 mt-8 rounded-xl bg-gradient-to-br from-gray-600 to-gray-800 dark:from-zinc-600 dark:to-zinc-800 text-white font-semibold shadow-lg hover:from-gray-700 hover:to-gray-900 dark:hover:from-zinc-700 dark:hover:to-zinc-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-700 dark:focus:ring-zinc-700 transition-all duration-200 transform active:scale-95 active:shadow-md">
      <svg class="h-5 w-5 mr-2" 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="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"></path></svg>
      Sign In
    </button>

    <div class="relative mt-8">
      <div class="absolute inset-0 flex items-center" aria-hidden="true">
        <div class="w-full border-t border-gray-300 dark:border-zinc-700"></div>
      </div>
      <div class="relative flex justify-center text-sm">
        <span class="px-2 bg-gray-100 dark:bg-zinc-700 text-gray-500 dark:text-gray-400 rounded-full shadow-inner">Or continue with</span>
      </div>
    </div>

    <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-4">
      <button type="button" class="w-full flex items-center justify-center py-3 px-4 rounded-xl bg-gray-200 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-700 text-gray-700 dark:text-gray-300 font-medium shadow-md hover:border-gray-500 dark:hover:border-zinc-500 transition-all duration-200 transform active:scale-98">
        <svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path d="M6.29 18.251c-.698-.59-.766-.884-.367-1.425.215-.29.414-.52.583-.715.169-.196.347-.384.53-.574.18-.182.34-.33.483-.448.14-.118.25-.22.33-.3.08-.08.15-.145.2-.18.05-.035.09-.06.12-.08.03-.02.05-.03.06-.04.01-.01.02-.01.02-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01 0-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01C9.697 10.999 10.5 10 10.5 10c.813-.813 1.62-.057 2.18-.124.717-.084 1.343-.223 1.95-.455.608-.232 1.139-.553 1.58-.934.44-.38.78-.79 1.015-1.22.232-.43.35-86.745-.35-1.35.3-.43.3-176.6-.7-227.1-.6-.28-.5-.81-.97-1.46-.47-.65-.89-1.26-1.26-1.83-.37-.57-.68-1.07-.93-1.49-.24-.42-.4-79-.19-.115-.115.115-.115 0 0 0 0 .115.115.115.172.172 0 0 0 0 .115-.115.115-.115 0 0 0 0 0-.115.115.115 0 0 0 0 0-.115.115.115 0-.115.115-.115c.67.67.67 1.34 0 2.01-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67.67-.671.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01C9.07 14.93 9.77 15.63 9.77 15.63c-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0zM10 18c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0-4c-.55 0-1-.45-1-.999S9.45 12 10 12s1 .45 1 1.001S10.55 14 10 14zm0-4c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/>
          <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.871v-6.985h-2.54V10h2.54V7.723c0-2.508 1.493-3.891 3.774-3.891 1.094 0 2.24.195 2.24.195v2.454H15.18c-1.24 0-1.62.772-1.62 1.56V10h2.773l-.443 2.89H13.56V20C18.342 19.127 22 14.99 22 10z" clip-rule="evenodd"></path>
        </svg>
        Facebook
      </button>
      <button type="button" class="w-full flex items-center justify-center py-3 px-4 rounded-xl bg-gray-200 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-700 text-gray-700 dark:text-gray-300 font-medium shadow-md hover:border-gray-500 dark:hover:border-zinc-500 transition-all duration-200 transform active:scale-98">
        <svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path d="M17 6H3c-.55 0-1-.45-1-1s.45-1 1-1h14c.55 0 1 .45 1 1s-.45 1-1 1zm0 4H3c-.55 0-1-.45-1-1s.45-1 1-1h14c.55 0 1 .45 1 1s-.45 1-1 1zM3 14h14c.55 0 1 .45 1 1s-.45 1-1 1H3c-.55 0-1-.45-1-1s.45-1 1-1zm0 4h14c.55 0 1 .45 1 1s-.45 1-1 1H3c-.55 0-1-.45-1-1s.45-1 1-1z"/>
          <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.871v-6.985h-2.54V10h2.54V7.723c0-2.508 1.493-3.891 3.774-3.891 1.094 0 2.24.195 2.24.195v2.454H15.18c-1.24 0-1.62.772-1.62 1.56V10h2.773l-.443 2.89H13.56V20C18.342 19.127 22 14.99 22 10z" clip-rule="evenodd"></path>
        </svg>
        Google
      </button>
    </div>

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

    <div class="mt-6 text-center text-xs text-gray-500 dark:text-gray-500">
      <p>Need help? Contact support at <a href="mailto:[email protected]" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors duration-200">[email protected]</a></p>
    </div>
  </div>
</div>

Authentication_Components_Component

Tailwind CSS를 사용하여 마이크로 상호 작용, 보색 구성표 및 어두운 테마 지원을 제공하는 소셜 미디어를 위한 간단하고 반응이 빠른 인증 구성 요소입니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-gray-900 dark:to-black p-4">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 w-full max-w-md transform transition duration-500 hover:scale-105">
    <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white text-center mb-8">Join the Fun!</h2>

    <div class="space-y-6">
      <div>
        <label for="email" class="text-sm font-medium text-gray-700 dark:text-gray-300 sr-only">Email address</label>
        <input type="email" id="email" name="email" autocomplete="email" required class="block w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-700 dark:text-white transition duration-300 ease-in-out transform focus:scale-105" placeholder="Email address">
      </div>

      <div>
        <label for="password" class="text-sm font-medium text-gray-700 dark:text-gray-300 sr-only">Password</label>
        <input type="password" id="password" name="password" autocomplete="current-password" required class="block w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-700 dark:text-white transition duration-300 ease-in-out transform focus:scale-105" 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-purple-600 focus:ring-purple-500 border-gray-300 rounded dark:border-gray-600 dark:bg-gray-700">
          <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-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-300 transform transition duration-300 hover:scale-105">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-semibold text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:bg-purple-700 dark:hover:bg-purple-800 dark:focus:ring-purple-600 transform transition duration-300 hover:scale-105 hover:shadow-lg">
          Sign In
        </button>
      </div>
    </div>

    <div class="mt-8 text-center">
      <p class="text-sm text-gray-600 dark:text-gray-400">Or sign in with</p>
      <div class="mt-4 flex justify-center space-x-4">
        <button class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-600 hover:bg-blue-700 text-white shadow-md transform transition duration-300 hover:scale-110" aria-label="Sign in with Facebook">
          <i class="fab fa-facebook-f text-xl"></i>
        </button>
        <button class="w-12 h-12 flex items-center justify-center rounded-full bg-red-600 hover:bg-red-700 text-white shadow-md transform transition duration-300 hover:scale-110" aria-label="Sign in with Google">
          <i class="fab fa-google text-xl"></i>
        </button>
        <button class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-400 hover:bg-blue-500 text-white shadow-md transform transition duration-300 hover:scale-110" aria-label="Sign in with Twitter">
          <i class="fab fa-twitter text-xl"></i>
        </button>
      </div>
      <p class="mt-6 text-sm text-gray-600 dark:text-gray-400">
        Don't have an account? 
        <a href="#" class="font-medium text-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-300 transform transition duration-300 hover:scale-105">Sign Up</a>
      </p>
    </div>
  </div>
</div>

<!-- Font Awesome for social icons (optional - only if you want the icons) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

Authentication Components 구성 요소

머티리얼 디자인 원칙에 따라 설계된 간단하고 반응이 빠른 인증 구성요소로, 어스 톤과 다크 모드를 지원합니다. 포트폴리오 사이트에 적합합니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center bg-stone-100 dark:bg-stone-900 p-4"><div class="bg-white dark:bg-stone-800 p-8 rounded-lg shadow-md w-full max-w-md"><div class="flex justify-center mb-6"><svg class="h-12 w-12 text-stone-700 dark:text-stone-300" 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="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 13a2 2 0 11-4 0 2 2 0 014 0z"></path></svg></div><h2 class="text-2xl font-bold text-center text-stone-800 dark:text-white mb-6">Welcome Back!</h2><form><div class="mb-4"><label for="email" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Email</label><input type="email" id="email" class="shadow-sm appearance-none border border-stone-300 dark:border-stone-600 rounded w-full py-2 px-3 text-stone-700 dark:text-white leading-tight focus:outline-none focus:ring-2 focus:ring-stone-500 bg-stone-50 dark:bg-stone-700" placeholder="[email protected]"></div><div class="mb-6"><label for="password" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Password</label><input type="password" id="password" class="shadow-sm appearance-none border border-stone-300 dark:border-stone-600 rounded w-full py-2 px-3 text-stone-700 dark:text-white leading-tight focus:outline-none focus:ring-2 focus:ring-stone-500 bg-stone-50 dark:bg-stone-700" placeholder="••••••••"></div><button type="submit" class="w-full bg-amber-700 hover:bg-amber-800 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">Sign In</button></form><div class="mt-6 text-center"><a href="#" class="inline-block align-baseline font-bold text-sm text-amber-700 hover:text-amber-800">Forgot Password?</a></div></div></div>

Skeuomorphic 인증 컴포넌트

스큐어모픽 인증 컴포넌트는 트라이어딕 컬러 스키마, 중간 정도의 복잡성, 반응형 디자인, 다크 모드를 지원합니다. 포트폴리오 목적을 위해 설계되었습니다. Tailwind CSS를 사용합니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 p-8 rounded-xl shadow-xl space-y-8">
    <div>
      <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
        Welcome Back!
      </h2>
      <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-300">
        Please sign in to your account
      </p>
    </div>
    <form class="mt-8 space-y-6" action="#" method="POST">
      <input type="hidden" name="remember" value="true">
      <div class="rounded-md shadow-sm -space-y-px">
        <div>
          <label for="email-address" class="sr-only">Email address</label>
          <input id="email-address" name="email" type="email" autocomplete="email" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm dark:bg-gray-700" 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="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm dark:bg-gray-700" placeholder="Password">
        </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 focus:ring-indigo-500 border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
          <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-indigo-600 hover:text-indigo-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-indigo-600 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-800">
          <span class="absolute left-0 inset-y-0 flex items-center pl-3">
            <!-- Lock icon - replace with your preferred icon library/svg -->
            <svg class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400 dark:text-indigo-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm2-2a3 3 0 116 0v2H7V7zm6 5a1 1 0 100 2h-3a1 1 0 100-2h3z" clip-rule="evenodd" />
            </svg>
          </span>
          Sign in
        </button>
      </div>
    </form>
  </div>
</div>

반응형, 미니멀리스트 로그인 양식 구성 요소는 포트폴리오 또는 웹 응용 프로그램을 위해 설계되었습니다. 보색이 돋보이는 플랫 디자인 미학이 특징입니다: 파란색은 밝은 모드에서 대화형 요소에 사용되고, 주황색은 어두운 모드에서 사용됩니다. 이 양식에는 이메일 및 비밀번호 필드, '비밀번호 찾기' 옵션, '비밀번호 찾기' 링크, 가입 옵션 및 소셜 로그인 통합(예: GitHub)이 포함됩니다. 어두운 테마를 지원하며 쉽게 통합할 수 있도록 HTML 및 Tailwind CSS로만 구축되었습니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4 sm:p-6 lg:p-8 selection:bg-blue-500 selection:text-white dark:selection:bg-orange-500 dark:selection:text-white">
  <div class="bg-white dark:bg-gray-800 p-6 sm:p-8 md:p-10 rounded-xl shadow-lg w-full max-w-md">
    <div class="text-center mb-6 sm:mb-8">
      <!-- Optional: Logo (example using picsum.photos) -->
      <!-- <img class="mx-auto h-12 w-auto mb-4" src="https://picsum.photos/seed/formlogo/150/50" alt="Company Logo"> -->
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
        Sign In
      </h2>
      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
        Welcome back! Please enter your details.
      </p>
    </div>

    <form action="#" method="POST" class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email address</label>
        <input type="email" name="email" id="email" autocomplete="email" required
               class="appearance-none block w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:focus:ring-orange-500 dark:focus:border-orange-500">
      </div>

      <div>
        <div class="flex items-center justify-between mb-1">
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
          <div class="text-sm">
            <a href="#" class="font-medium text-blue-600 hover:text-blue-700 dark:text-orange-400 dark:hover:text-orange-500 transition-colors duration-150">
              Forgot password?
            </a>
          </div>
        </div>
        <input type="password" name="password" id="password" autocomplete="current-password" required
               class="appearance-none block w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:focus:ring-orange-500 dark:focus:border-orange-500">
      </div>

      <div class="flex items-center">
        <input id="remember-me" name="remember-me" type="checkbox"
                class="h-4 w-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-orange-500 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600 dark:checked:bg-orange-500 dark:checked:border-orange-500 transition-colors duration-150">
        <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
      </div>

      <div>
        <button type="submit"
                class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-orange-500 dark:hover:bg-orange-600 dark:focus:ring-orange-500 dark:focus:ring-offset-gray-800 transition-colors duration-150">
          Sign In
        </button>
      </div>
    </form>

    <p class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400">
      Not a member?
      <a href="#" class="font-medium text-blue-600 hover:text-blue-700 dark:text-orange-400 dark:hover:text-orange-500 transition-colors duration-150">
        Create an account
      </a>
    </p>
    
    <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-1 gap-3">
            <div>
                <a href="#" class="w-full inline-flex justify-center items-center py-2.5 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-150">
                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                        <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.477 0 10c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.483 0-.237-.009-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.03-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.026 2.747-1.026.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.338 4.695-4.566 4.942.359.308.678.92.678 1.852 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.001 10.001 0 0020 10c0-5.523-4.477-10-10-10z" clip-rule="evenodd" />
                    </svg>
                    Sign in with GitHub
                </a>
            </div>
            <!-- Example for Google Icon (you would need the SVG) -->
            <!-- 
            <div>
                <a href="#" class="w-full inline-flex justify-center items-center py-2.5 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-150">
                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">Path for Google icon</svg>
                    Sign in with Google
                </a>
            </div>
            -->
        </div>
    </div>

  </div>
</div>

Authentication Components 구성 요소

3D 디자인, 트라이어드 색 구성표, 복잡한 상호 작용, 반응형 및 다크 모드 지원을 통한 전자 상거래를 위한 인증 구성 요소.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col justify-center items-center py-12 sm:px-6 lg:px-8">
  <div class="sm:mx-auto sm:w-full sm:max-w-xl">
    <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
      Create your account
    </h2>
  </div>

  <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-xl">
    <div class="bg-white dark:bg-gray-800 py-8 px-4 shadow-lg rounded-lg sm:px-10 transform perspective-1000 rotateX-10">
      <div class="relative">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-300"></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-300">
            Or continue with
          </span>
        </div>
      </div>

      <div class="mt-6 grid grid-cols-3 gap-3">
        <div>
          <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
              <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.01 c0 4.41 2.866 8.165 6.839 9.488.599.11.819-.26.819-.58v-1.9c-2.77.6-3.338-1.37-3.338-1.37-.454-1.156-1.11-1.464-1.11-1.464-.906-.619.069-.607.069-.607 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.116-4.555-4.93 0-1.09.39-1.984 1.024-2.675-.102-.253-.446-1.266.098-2.652 0 0 .84-.268 2.75 1.022A9.607 9.607 0 0110 4.815c.85.004 1.705.115 2.504.337 1.909-1.29 2.747-1.022 2.747-1.022.546 1.386.202 2.398.1 2.652.635.691 1.024 1.585 1.024 2.675 0 3.822-2.339 4.675-4.569 4.92.359.306.675.91.675 1.838v2.734c0 .32-.21.694-.825.578C17.103 18.163 20 14.407 20 10.01A9.996 9.996 0 0010 0z" clip-rule="evenodd"></path>
            </svg>
          </a>
        </div>
        <div>
          <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
              <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z"></path>
            </svg>
          </a>
        </div>
        <div>
          <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
              <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.878v-6.987h-2.54V10h2.54V7.71c0-2.51 1.492-3.89 3.776-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V10h2.773l-.443 2.89h-2.33v6.988C16.343 19.128 20 14.991 20 10z" clip-rule="evenodd"></path>
            </svg>
          </a>
        </div>
      </div>

      <div class="mt-6">
        <form action="#" method="POST" 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">
              <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-500 dark:text-white">
            </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">
              <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-500 dark:text-white">
            </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 focus:ring-indigo-500 border-gray-300 rounded dark:bg-gray-700 dark:border-gray-600">
              <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-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">
                Forgot your password?
              </a>
            </div>
          </div>

          <div>
            <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
              Sign up
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Skeuomorphism 인증 컴포넌트

Skeuomorphism 인증 구성 요소: 블로그/콘텐츠 목적을 위한 유사한 색 구성표 및 복잡한 레이아웃, 반응형 및 어두운 테마 지원.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-10 font-sans">
  <div class="bg-white dark:bg-gray-800 shadow-2xl rounded-3xl p-10 max-w-md w-full transform transition duration-500 hover:scale-105 border-8 border-gray-200 dark:border-gray-700">
    <div class="text-center mb-10">
      <svg class="w-20 h-20 mx-auto text-gray-600 dark:text-gray-300" 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="M12 11c0 3.517-1.045 6.705-3 9.5m0-9.5a5 5 0 115 5v4.5M12 11C9.49 14.49 8 17.5 8 21m4-10a5 5 0 015 5v4.5m-16-.5h16m-7 0h.01"></path></svg>
      <h1 class="text-3xl font-extrabold text-gray-800 dark:text-white mt-4">Welcome Back!</h1>
      <p class="text-gray-500 dark:text-gray-400 mt-2">Sign in to continue to your account.</p>
    </div>

    <form>
      <div class="mb-6">
        <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 transform -translate-y-2">Email Address</label>
        <input type="email" id="email" class="shadow-inner appearance-none border rounded-xl w-full py-4 px-5 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-4 focus:ring-yellow-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" placeholder="Enter your email">
      </div>

      <div class="mb-8">
        <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 transform -translate-y-2">Password</label>
        <input type="password" id="password" class="shadow-inner appearance-none border rounded-xl w-full py-4 px-5 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-4 focus:ring-yellow-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" placeholder="Enter your password">
      </div>

      <div class="flex items-center justify-between mb-8">
        <div class="flex items-center">
          <input id="remember_me" type="checkbox" class="form-checkbox h-5 w-5 text-yellow-600 dark:text-yellow-500 rounded border-gray-300 dark:border-gray-600 transition duration-150 ease-in-out">
          <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 text-yellow-600 hover:text-yellow-700 dark:text-yellow-500 dark:hover:text-yellow-600 transition duration-200 ease-in-out">Forgot Password?</a>
      </div>

      <button type="submit" class="w-full bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600 text-white font-bold py-4 px-6 rounded-2xl focus:outline-none focus:shadow-outline transform transition duration-300 hover:scale-105 shadow-lg shadow-yellow-300/50 dark:shadow-lg dark:shadow-yellow-700/50">
        Sign In
      </button>
    </form>

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

Authentication Components 구성 요소

소셜 미디어 인증을 위해 Brutalism으로 스타일링된 웹 구성 요소는 파스텔 색 구성표와 어두운 모드의 고대비와 인터페이스합니다.

열다 미리 보기

                <div class="min-h-screen bg-white dark:bg-gray-900 flex items-center justify-center p-4">
    <div class="max-w-md w-full bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md p-8 space-y-8">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 text-center">Log In</h2>
        <form class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
                <input type="email" name="email" required placeholder="[email protected]" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:border-blue-600 p-2">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
                <input type="password" name="password" required placeholder="••••••••" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:border-blue-600 p-2">
            </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-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded">
                    <label for="remember-me" class="ml-2 block text-sm text-gray-800 dark:text-gray-100">Remember me</label>
                </div>
                <div class="text-sm">
                    <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Forgot your password?</a>
                </div>
            </div>
            <button type="submit" class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400 dark:focus:ring-blue-400">Log In</button>
        </form>
        <div class="text-center">
            <p class="text-sm text-gray-600 dark:text-gray-300">Don't have an account? <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Sign Up</a></p>
        </div>
        <div class="flex justify-between items-center">
            <div class="h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-600"></div>
            <span class="text-gray-600 dark:text-gray-300">or</span>
            <div class="h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-600"></div>
        </div>
        <div class="flex justify-center space-x-4">
            <a href="#" class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shadow-md">
                <img src="https://picsum.photos/30/30?random=1" alt="Example Image" class="rounded-full" />
            </a>
            <a href="#" class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shadow-md">
                <img src="https://picsum.photos/30/30?random=2" alt="Example Image" class="rounded-full" />
            </a>
            <a href="#" class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shadow-md">
                <img src="https://picsum.photos/30/30?random=3" alt="Example Image" class="rounded-full" />
            </a>
        </div>
    </div>
</div>

인증 구성 요소

머티리얼 디자인(Material Design)을 사용하는 비즈니스 및 기업 웹 사이트를 위한 간단한 인증 구성 요소이며 Tailwind CSS와 보색 구성표를 사용합니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-8 max-w-sm w-full">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center">Login</h2>
        <form class="mt-4 space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
                <input type="email" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:focus:ring-blue-500" placeholder="[email protected]">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
                <input type="password" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:focus:ring-blue-500" placeholder="********">
            </div>
            <button type="submit" class="w-full bg-blue-600 dark:bg-blue-500 text-white font-semibold py-2 rounded-md shadow hover:bg-blue-500 dark:hover:bg-blue-400 transition duration-300">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-blue-600 dark:text-blue-400 hover:underline">Sign Up</a></p>
        </div>
    </div>
</div>