CCHub Logo CCHub Tailwind Collection
구성 요소 참가 신청서 Registration Form 구성 요소

Registration Form 구성 요소

3D 파스텔 디자인의 간단한 등록 양식으로 반응형이며 다크 모드를 지원합니다. 블로그 또는 콘텐츠 소비 웹 사이트에 적합합니다.

미리 보기

HTML 코드 

<div class="min-h-screen bg-pastel-light dark:bg-pastel-dark flex items-center justify-center">
  <div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-2xl w-full max-w-md">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Register</h2>
    <form>
      <div class="mb-4">
        <label for="username" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2">Username</label>
        <input type="text" id="username" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:text-white dark:border-gray-500" placeholder="Username">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2">Email</label>
        <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:text-white dark:border-gray-500" placeholder="Email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2">Password</label>
        <input type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:text-white dark:border-gray-500" placeholder="********">
      </div>
      <div class="flex items-center justify-between">
        <button class="bg-pastel-accent hover:bg-pastel-accent-dark text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-pastel-accent light:hover:bg-pastel-accent-dark" type="button">
          Register
        </button>
      </div>
    </form>
  </div>
</div>

관련 구성 요소

Registration Form 구성 요소

Glassmorphism으로 스타일링된 반응형 등록 양식 구성 요소로, 흐림 효과가 있는 젖빛 유리와 같은 반투명 요소를 특징으로 하고 다크 모드를 지원하며 자리 표시자 이미지를 표시합니다.

열다

Registration Form 구성 요소

단색 색 구성표를 사용하여 스큐어모픽 스타일로 디자인되고 전자 상거래 경험에 맞게 조정된 반응형 등록 양식 구성 요소입니다. 다크 모드를 지원하며 사용자 등록을 위한 대화형 입력 기능이 포함되어 있습니다.

열다

Registration Form 구성 요소

파스텔 색 구성표가 있는 브루탈리즘 스타일로 디자인되었으며 비즈니스/기업 웹사이트에 적합한 반응형 등록 양식 구성 요소입니다. Tailwind CSS를 사용한 다크 모드 지원이 특징입니다.

열다