Registration Form 구성 요소
스큐어모픽 디자인, 차분한 색 구성표 및 다크 모드 지원을 갖춘 반응형 등록 양식 구성 요소로 여행 및 관광 웹사이트에 적합합니다. 엠보싱된 버튼과 오목한 입력 필드와 같은 실제 요소를 모방합니다.
HTML 코드
<div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 font-sans">
<div class="w-full max-w-lg bg-gray-100 dark:bg-gray-700 rounded-3xl shadow-xl p-8 transform transition-all duration-300 ease-in-out
dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.6),_inset_0_-2px_4px_rgba(255,255,255,0.05),_0_8px_16px_rgba(0,0,0,0.5)]
shadow-[inset_0_2px_4px_rgba(255,255,255,0.8),_inset_0_-2px_4px_rgba(0,0,0,0.1),_0_8px_16px_rgba(0,0,0,0.2)]">
<h2 class="text-3xl font-extrabold text-gray-700 dark:text-gray-200 mb-8 text-center drop-shadow-sm">
<span class="block">Embark on Your Journey</span>
<span class="block text-sm font-normal text-gray-500 dark:text-gray-400 mt-2">Register for an unforgettable experience</span>
</h2>
<form class="space-y-6">
<div>
<label for="full-name" class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2 drop-shadow-sm">Full Name</label>
<input type="text" id="full-name" name="full-name" placeholder="John Doe" autocomplete="name"
class="w-full px-5 py-3 border border-transparent rounded-2xl text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-400
bg-gray-200 dark:bg-gray-800 shadow-inner
shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),_inset_0_-2px_4px_rgba(255,255,255,0.7)]
dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),_inset_0_-2px_4px_rgba(255,255,255,0.02)]
transition-all duration-200 ease-in-out placeholder-gray-500 dark:placeholder-gray-400"
aria-label="Full Name">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2 drop-shadow-sm">Email Address</label>
<input type="email" id="email" name="email" placeholder="[email protected]" autocomplete="email"
class="w-full px-5 py-3 border border-transparent rounded-2xl text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-400
bg-gray-200 dark:bg-gray-800 shadow-inner
shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),_inset_0_-2px_4px_rgba(255,255,255,0.7)]
dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),_inset_0_-2px_4px_rgba(255,255,255,0.02)]
transition-all duration-200 ease-in-out placeholder-gray-500 dark:placeholder-gray-400"
aria-label="Email Address">
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2 drop-shadow-sm">Password</label>
<input type="password" id="password" name="password" placeholder="••••••••"
class="w-full px-5 py-3 border border-transparent rounded-2xl text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-400
bg-gray-200 dark:bg-gray-800 shadow-inner
shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),_inset_0_-2px_4px_rgba(255,255,255,0.7)]
dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),_inset_0_-2px_4px_rgba(255,255,255,0.02)]
transition-all duration-200 ease-in-out placeholder-gray-500 dark:placeholder-gray-400"
aria-label="Password">
</div>
<div>
<label for="confirm-password" class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2 drop-shadow-sm">Confirm Password</label>
<input type="password" id="confirm-password" name="confirm-password" placeholder="••••••••"
class="w-full px-5 py-3 border border-transparent rounded-2xl text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-400
bg-gray-200 dark:bg-gray-800 shadow-inner
shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),_inset_0_-2px_4px_rgba(255,255,255,0.7)]
dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),_inset_0_-2px_4px_rgba(255,255,255,0.02)]
transition-all duration-200 ease-in-out placeholder-gray-500 dark:placeholder-gray-400"
aria-label="Confirm Password">
</div>
<div class="relative flex items-start">
<div class="flex items-center h-5">
<input id="terms" name="terms" type="checkbox"
class="focus:ring-blue-500 h-5 w-5 text-blue-600 rounded drop-shadow-sm
bg-gray-200 dark:bg-gray-800 border-gray-300 dark:border-gray-600
shadow-[inset_0_1px_2px_rgba(0,0,0,0.1),_inset_0_-1px_2px_rgba(255,255,255,0.6)]
dark:shadow-[inset_0_1px_2px_rgba(0,0,0,0.7),_inset_0_-1px_2px_rgba(255,255,255,0.05)]
appearance-none checked:bg-blue-500 checked:border-transparent cursor-pointer
transition-all duration-200 ease-in-out">
<div class="absolute w-5 h-5 flex items-center justify-center pointer-events-none">
<svg class="h-4 w-4 text-white opacity-0 transform scale-0 transition-all duration-200 ease-in-out pointer-events-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
</div>
<div class="ml-3 text-sm">
<label for="terms" class="font-medium text-gray-700 dark:text-gray-300 drop-shadow-sm">
I agree to the <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-400 rounded-md transition duration-200">Terms and Conditions</a>
</label>
</div>
</div>
<div>
<button type="submit"
class="w-full flex justify-center py-3 px-6 border border-transparent rounded-2xl text-lg font-bold text-white
bg-blue-500 dark:bg-blue-600 hover:bg-blue-600 dark:hover:bg-blue-700
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400
shadow-xl
shadow-[0_4px_8px_rgba(0,0,0,0.2),_inset_0px_2px_4px_rgba(255,255,255,0.4),_inset_0px_-2px_4px_rgba(0,0,0,0.2)]
dark:shadow-[0_4px_8px_rgba(0,0,0,0.6),_inset_0px_2px_4px_rgba(255,255,255,0.1),_inset_0px_-2px_4px_rgba(0,0,0,0.4)]
active:shadow-inner active:bg-blue-700 dark:active:bg-blue-800
transform active:scale-98 transition-all duration-200 ease-in-out drop-shadow-sm">
Register Now
</button>
</div>
</form>
</div>
</div>
<style>
/* Custom style for the checkbox checkmark animation */
input[type='checkbox']:checked + div > svg {
opacity: 1;
transform: scale(1);
}
</style>관련 구성 요소
등록 양식 - 전자 상거래 - 순풍
반응형 및 다크 모드를 지원하는 Tailwind CSS를 사용하는 전자 상거래를 위한 미니멀리스트 플랫 디자인 등록 양식 구성 요소로, 보색적인 파란색-주황색 색 구성표를 특징으로 합니다.
Registration Form 구성 요소
인더스트리얼하면서도 사탕처럼 달콤한 색 구성표를 가진 반응형 등록 양식 구성 요소로, 비영리/자선 단체에 적합하며 노출된 요소와 실용적인 미학을 특징으로 합니다.