CCHub Logo CCHub Tailwind Collection
구성 요소 로그인 양식 스큐어모픽 로그인 양식

스큐어모픽 로그인 양식

스큐어모픽 로그인 양식 컴포넌트(Skeuomorphic Login Form Component)로, 그레이스케일(Grayscale) 색 구성표와 복잡한 복잡성을 가지고 있으며, 포트폴리오 웹 사이트를 위해 설계되었습니다. 반응형이며 어두운 테마를 지원합니다.

미리 보기

HTML 코드 

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

관련 구성 요소

로그인 양식 구성 요소

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

열다

로그인 양식 구성 요소

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

열다

스큐어모픽 로그인 양식

스큐어모피즘 디자인, 단색 색 구성표 및 적당한 복잡성을 갖춘 반응형 로그인 양식으로 소셜 미디어 플랫폼용으로 설계되었습니다. Tailwind CSS를 사용한 다크 모드 지원이 포함됩니다.

열다