Registration Form 구성 요소
포레스트/그린 그라데이션 색 구성표, 부드러운 전환 및 다크 모드 지원을 갖춘 복잡하고 반응이 빠른 등록 양식 구성 요소로, 교육 플랫폼에 적합합니다.
HTML 코드
<div class="min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center bg-gradient-to-br from-green-50 to-emerald-100 dark:from-gray-900 dark:to-green-950 transition-all duration-500 ease-in-out">
<div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden md:flex transform transition-all duration-500 ease-in-out hover:shadow-2xl">
<!-- Left Section: Image / Branding -->
<div class="md:w-1/2 p-6 sm:p-8 lg:p-10 flex flex-col justify-center items-center text-center bg-gradient-to-br from-green-400 to-emerald-600 dark:from-green-700 dark:to-emerald-900 text-white relative overflow-hidden">
<div class="absolute inset-0 opacity-10 dark:opacity-5 transition-opacity duration-500" style="background-image: url('https://picsum.photos/600/800?random=1'); background-size: cover; background-position: center;"></div>
<div class="relative z-10">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-4 leading-tight drop-shadow-lg">Join Our Learning Journey</h2>
<p class="text-base sm:text-lg lg:text-xl font-light mb-6 opacity-90 drop-shadow">Unlock a world of knowledge and connect with expert instructors. Start your adventure today!</p>
<div class="space-y-4">
<div class="flex items-center justify-center space-x-3">
<svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span class="text-lg font-medium">Interactive Courses</span>
</div>
<div class="flex items-center justify-center space-x-3">
<svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2H4zm12 1v10H4V5h12zm-3 7a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
<span class="text-lg font-medium">Expert Instructors</span>
</div>
<div class="flex items-center justify-center space-x-3">
<svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V4a2 2 0 00-2-2H6zm0 2h8v12H6V4zm2 3.5a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1zm1 5.5a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
<span class="text-lg font-medium">Certification Programs</span>
</div>
</div>
</div>
</div>
<!-- Right Section: Registration Form -->
<div class="md:w-1/2 p-6 sm:p-8 lg:p-10 flex flex-col justify-center">
<h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-6 text-center transform transition-colors duration-500">
Create Your Account
</h2>
<form class="space-y-6">
<!-- Full Name -->
<div>
<label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 transition-colors duration-500">Full Name</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"></path></svg>
</div>
<input type="text" id="full-name" name="full-name" placeholder="John Doe" class="mt-1 block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-600 focus:border-transparent dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-300 ease-in-out" required>
</div>
</div>
<!-- Email Address -->
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 transition-colors duration-500">Email Address</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path></svg>
</div>
<input type="email" id="email" name="email" placeholder="[email protected]" class="mt-1 block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-600 focus:border-transparent dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-300 ease-in-out" required>
</div>
</div>
<!-- Password -->
<div>
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 transition-colors duration-500">Password</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2h2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2h2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path></svg>
</div>
<input type="password" id="password" name="password" placeholder="Minimum 8 characters" class="mt-1 block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-600 focus:border-transparent dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-300 ease-in-out" required>
</div>
</div>
<!-- Confirm Password -->
<div>
<label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 transition-colors duration-500">Confirm Password</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2h2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2h2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path></svg>
</div>
<input type="password" id="confirm-password" name="confirm-password" placeholder="Re-enter password" class="mt-1 block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-600 focus:border-transparent dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-300 ease-in-out" required>
</div>
</div>
<!-- Terms & Privacy Checkbox -->
<div class="flex items-center">
<input id="terms-privacy" name="terms-privacy" type="checkbox" class="h-4 w-4 text-green-600 dark:text-green-500 focus:ring-green-500 dark:focus:ring-green-400 border-gray-300 dark:border-gray-600 rounded transition-all duration-300" required>
<label for="terms-privacy" class="ml-2 block text-sm text-gray-900 dark:text-gray-300 transition-colors duration-500">
I agree to the <a href="#" class="font-medium text-green-600 dark:text-green-500 hover:text-green-500 dark:hover:text-green-400 transition-colors duration-300">Terms of Service</a> and <a href="#" class="font-medium text-green-600 dark:text-green-500 hover:text-green-500 dark:hover:text-green-400 transition-colors duration-300">Privacy Policy</a>.
</label>
</div>
<!-- Submit Button -->
<div>
<button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-lg font-semibold text-white bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-offset-gray-800 dark:focus:ring-green-600 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 active:scale-95">
Register Now
</button>
</div>
<!-- Social Login Options -->
<div class="relative py-4">
<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 dark:bg-gray-800 text-gray-500 dark:text-gray-400 transition-colors duration-500">Or continue with</span>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<button type="button" class="w-full flex items-center justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-green-600 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5">
<svg class="w-5 h-5 mr-2" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24 9.5c3.27 0 5.66.97 7.76 2.94l6.19-6.19C34.73 2.92 29.8 1 24 1 15.34 1 8.08 5.76 5.09 13.06l6.6 5.15C13.23 13.9 18.06 9.5 24 9.5z" fill="#EA4335"/>
<path d="M13.23 18.21l-6.6-5.15C5.76 15.92 5 19.8 5 24c0 4.2.76 8.08 2.06 11.09l6.6-5.15C13.9 27.06 13.23 24 13.23 24s0 0 0 0z" fill="#FBBC04"/>
<path d="M24 38.5c-5.94 0-10.77-4.4-12.27-10.29l-6.6 5.15C8.08 42.24 15.34 47 24 47c7.58 0 13.56-2.92 18.01-7.86l-6.19-6.19C29.66 37.03 26.73 38.5 24 38.5z" fill="#34A853"/>
<path d="M42.01 24c0-1.74-.15-3.39-.43-5H24v10h11.23c-.53 2.87-2.32 5.25-4.88 6.84L38.01 39C40.68 36.87 42.01 33.4 42.01 24z" fill="#4285F4"/>
</svg>
Google
</button>
<button type="button" class="w-full flex items-center justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-green-600 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22.11C18.342 21.364 22 17.114 22 12z" clip-rule="evenodd" />
</svg>
Facebook
</button>
</div>
<!-- Already have an account -->
<div class="text-center mt-6">
<p class="text-sm text-gray-500 dark:text-gray-400 transition-colors duration-500">
Already have an account? <a href="#" class="font-medium text-green-600 dark:text-green-500 hover:text-green-500 dark:hover:text-green-400 transition-colors duration-300">Sign In</a>
</p>
</div>
</form>
</div>
</div>
</div>관련 구성 요소
Registration Form 구성 요소
단색 색 구성표를 사용하여 스큐어모픽 스타일로 디자인되고 전자 상거래 경험에 맞게 조정된 반응형 등록 양식 구성 요소입니다. 다크 모드를 지원하며 사용자 등록을 위한 대화형 입력 기능이 포함되어 있습니다.
Registration Form 구성 요소
뉴모피즘 디자인 스타일과 네온/전기 색 구성표를 사용하는 반응형 등록 양식 구성 요소로, 다크 모드를 지원합니다. 컨설팅/서비스를 위해 설계되었습니다.