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

스큐어모픽 로그인 양식

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

미리 보기

HTML 코드 

<form class="max-w-sm mx-auto p-8 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark">
  <div class="mb-6">
    <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email</label>
    <input type="email" id="email" class="shadow-inner appearance-none border rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600" placeholder="Enter your email">
  </div>
  <div class="mb-6">
    <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Password</label>
    <input type="password" id="password" class="shadow-inner appearance-none border rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600" placeholder="Enter your password">
  </div>
  <div class="flex items-center justify-between">
    <button class="bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 text-white font-bold py-3 px-6 rounded focus:outline-none focus:shadow-outline transform transition duration-300 ease-in-out hover:scale-105" type="button">
      Sign In
    </button>
    <a class="inline-block align-baseline font-bold text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-500" href="#">
      Forgot Password?
    </a>
  </div>
  <div class="mt-6 text-center">
    <p class="text-gray-600 dark:text-gray-400 text-sm">Or sign in with:</p>
    <div class="flex justify-center gap-4 mt-2">
      <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
        <i class="fab fa-google text-xl"></i>
      </button>
      <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
        <i class="fab fa-facebook text-xl"></i>
      </button>
      <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
        <i class="fab fa-twitter text-xl"></i>
      </button>
    </div>
  </div>
</form>

관련 구성 요소

Neumorphism 로그인 양식

대시보드용 Neumorphism 스타일의 로그인 양식 구성 요소로, Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원합니다.

열다

미니멀리스트 전자 상거래 로그인 양식

파스텔 색상의 미니멀하고 평평한 디자인의 로그인 양식으로 전자 상거래 사이트를 위해 설계되었습니다. 간단하고 반응이 빠르며 Tailwind CSS를 사용하여 다크 모드를 지원합니다.

열다

로그인 양식 구성 요소

파스텔 색상 팔레트(연한 분홍색 및 보색 회색)와 부드러운 전환 및 미묘한 호버링/포커스 효과와 같은 매력적인 마이크로 인터랙션으로 제작된 간단하고 반응형 로그인 양식 구성 요소입니다. 비즈니스 또는 기업 웹사이트용으로 설계된 이 제품은 깔끔한 레이아웃이 특징이며 완벽하게 반응하며 포괄적인 어두운 테마 지원을 포함합니다. 순전히 HTML 및 Tailwind CSS로 구축되었습니다.

열다