Registration Form 구성 요소
뉴모피즘 디자인 스타일과 네온/전기 색 구성표를 사용하는 반응형 등록 양식 구성 요소로, 다크 모드를 지원합니다. 컨설팅/서비스를 위해 설계되었습니다.
HTML 코드
<div class="p-4 sm:p-6 md:p-8 min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-black flex items-center justify-center font-sans">
<div class="w-full max-w-md mx-auto p-6 sm:p-8 md:p-10 rounded-3xl
bg-gradient-to-br from-gray-100 to-gray-200
dark:from-gray-800 dark:to-gray-900
shadow-neumorphism-light dark:shadow-neumorphism-dark
border border-solid border-transparent dark:border-gray-700
transition-all duration-500 ease-in-out
relative overflow-hidden
before:content-[''] before:absolute before:inset-0
before:rounded-3xl before:opacity-5 before:z-0
before:bg-gradient-to-br before:from-blue-500 before:via-purple-500 before:to-pink-500
dark:before:from-blue-700 dark:before:via-purple-700 dark:before:to-pink-700
before:blur-lg before:pointer-events-none
">
<h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-6 sm:mb-8 md:mb-10
bg-clip-text text-transparent bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500
dark:from-blue-400 dark:via-purple-400 dark:to-pink-400
drop-shadow-lg
relative z-10
">
Register for Services
</h2>
<form class="space-y-4 sm:space-y-6 relative z-10">
<div>
<label for="full-name" class="block text-sm font-medium mb-2
text-gray-700 dark:text-gray-300
relative before:content-[''] before:absolute before:w-full before:h-px before:-bottom-1 before:left-0 before:bg-gradient-to-r before:from-transparent before:via-blue-300 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300
">
Full Name
</label>
<input type="text" id="full-name" name="full-name" placeholder="John Doe"
class="w-full p-3 rounded-xl
text-gray-800 dark:text-gray-100
bg-gray-50 dark:bg-gray-700
shadow-neumorphism-inset-light dark:shadow-neumorphism-inset-dark
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75
dark:focus:ring-blue-400
transition-all duration-300 ease-in-out
peer
group
"
required>
</div>
<div>
<label for="email" class="block text-sm font-medium mb-2
text-gray-700 dark:text-gray-300
relative before:content-[''] before:absolute before:w-full before:h-px before:-bottom-1 before:left-0 before:bg-gradient-to-r before:from-transparent before:via-purple-300 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300
">
Email Address
</label>
<input type="email" id="email" name="email" placeholder="[email protected]"
class="w-full p-3 rounded-xl
text-gray-800 dark:text-gray-100
bg-gray-50 dark:bg-gray-700
shadow-neumorphism-inset-light dark:shadow-neumorphism-inset-dark
focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75
dark:focus:ring-purple-400
transition-all duration-300 ease-in-out
"
required>
</div>
<div>
<label for="phone" class="block text-sm font-medium mb-2
text-gray-700 dark:text-gray-300
relative before:content-[''] before:absolute before:w-full before:h-px before:-bottom-1 before:left-0 before:bg-gradient-to-r before:from-transparent before:via-pink-300 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300
">
Phone Number (Optional)
</label>
<input type="tel" id="phone" name="phone" placeholder="+1 (555) 123-4567"
class="w-full p-3 rounded-xl
text-gray-800 dark:text-gray-100
bg-gray-50 dark:bg-gray-700
shadow-neumorphism-inset-light dark:shadow-neumorphism-inset-dark
focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-75
dark:focus:ring-pink-400
transition-all duration-300 ease-in-out
">
</div>
<div>
<label for="service" class="block text-sm font-medium mb-2
text-gray-700 dark:text-gray-300
relative before:content-[''] before:absolute before:w-full before:h-px before:-bottom-1 before:left-0 before:bg-gradient-to-r before:from-transparent before:via-blue-300 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300
">
Interested Service
</label>
<select id="service" name="service"
class="w-full p-3 rounded-xl appearance-none
text-gray-800 dark:text-gray-100
bg-gray-50 dark:bg-gray-700
shadow-neumorphism-inset-light dark:shadow-neumorphism-inset-dark
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75
dark:focus:ring-blue-400
transition-all duration-300 ease-in-out
cursor-pointer
">
<option value="" disabled selected class="text-gray-400 dark:text-gray-500">Select a service</option>
<option value="strategy" class="bg-gray-50 dark:bg-gray-800">Business Strategy</option>
<option value="marketing" class="bg-gray-50 dark:bg-gray-800">Digital Marketing</option>
<option value="tech" class="bg-gray-50 dark:bg-gray-800">Technology Consulting</option>
<option value="hr" class="bg-gray-50 dark:bg-gray-800">HR & Talent Management</option>
<option value="finance" class="bg-gray-50 dark:bg-gray-800">Financial Advisory</option>
</select>
</div>
<div>
<label for="message" class="block text-sm font-medium mb-2
text-gray-700 dark:text-gray-300
relative before:content-[''] before:absolute before:w-full before:h-px before:-bottom-1 before:left-0 before:bg-gradient-to-r before:from-transparent before:via-purple-300 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300
">
Your Message (Optional)
</label>
<textarea id="message" name="message" rows="4" placeholder="Tell us about your needs..."
class="w-full p-3 rounded-xl
text-gray-800 dark:text-gray-100
bg-gray-50 dark:bg-gray-700
shadow-neumorphism-inset-light dark:shadow-neumorphism-inset-dark
focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75
dark:focus:ring-purple-400
transition-all duration-300 ease-in-out
resize-y
"></textarea>
</div>
<button type="submit"
class="w-full py-3 px-6 rounded-full font-bold text-lg
text-white
bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500
dark:from-blue-600 dark:via-purple-600 dark:to-pink-600
shadow-neumorphism-button dark:shadow-neumorphism-button-dark
hover:shadow-neumorphism-button-hover dark:hover:shadow-neumorphism-button-hover-dark
focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-blue-300 dark:focus:ring-blue-700
focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900
transition-all duration-300 ease-in-out
transform hover:-translate-y-0.5 hover:scale-105
active:translate-y-0 active:scale-100 active:shadow-neumorphism-button-active dark:active:shadow-neumorphism-button-active-dark
relative group
overflow-hidden
before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-white before:to-transparent before:opacity-0 before:scale-0 before:transition-transform before:duration-500 before:ease-out
hover:before:scale-125 hover:before:opacity-20
">
<span class="relative z-10">Submit Registration</span>
</button>
<p class="text-center text-xs sm:text-sm text-gray-500 dark:text-gray-400 mt-4">
By registering, you agree to our <a href="#" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 transition-colors duration-300">Terms of Service</a> and <a href="#" class="text-purple-500 hover:text-purple-600 dark:text-purple-400 dark:hover:text-purple-500 transition-colors duration-300">Privacy Policy</a>.
</p>
</form>
</div>
</div>
<style>
/* Base Neu-shadows - Customize these values */
.shadow-neumorphism-light {
box-shadow: 8px 8px 16px #cdd4df, -8px -8px 16px #ffffff;
}
.dark .shadow-neumorphism-dark {
box-shadow: 8px 8px 16px #22252a, -8px -8px 16px #3e4249;
}
/* Inset Neu-shadows */
.shadow-neumorphism-inset-light {
box-shadow: inset 5px 5px 10px #cad1db, inset -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphism-inset-dark {
box-shadow: inset 5px 5px 10px #22252a, inset -5px -5px 10px #444951;
}
/* Button Neu-shadows */
.shadow-neumorphism-button {
box-shadow: 6px 6px 12px #9ba4ae, -6px -6px 12px #ffffff;
}
.dark .shadow-neumorphism-button-dark {
box-shadow: 6px 6px 12px #181a1e, -6px -6px 12px #444951;
}
.shadow-neumorphism-button-hover {
box-shadow: 8px 8px 16px #9ba4ae, -8px -8px 16px #ffffff;
}
.dark .shadow-neumorphism-button-hover-dark {
box-shadow: 8px 8px 16px #181a1e, -8px -8px 16px #444951;
}
.shadow-neumorphism-button-active {
box-shadow: inset 5px 5px 10px #9da6b0, inset -5px -5px 10px #e0e6ec;
}
.dark .shadow-neumorphism-button-active-dark {
box-shadow: inset 5px 5px 10px #1c1f24, inset -5px -5px 10px #3a3d43;
}
/* Custom styles for select arrow */
select {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1.5em 1.5em;
padding-right: 2.5rem; /* Make space for the arrow */
}
.dark select {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E"); /* Dark mode arrow color */
filter: invert(1);
}
</style>관련 구성 요소
등록 양식 - 전자 상거래 - 순풍
반응형 및 다크 모드를 지원하는 Tailwind CSS를 사용하는 전자 상거래를 위한 미니멀리스트 플랫 디자인 등록 양식 구성 요소로, 보색적인 파란색-주황색 색 구성표를 특징으로 합니다.
Registration Form 구성 요소
회색조 색 구성표와 풍부한 대화형 요소가 있는 미니멀한 등록 양식으로, 반응형이며 Tailwind CSS를 사용한 다크 모드 지원이 포함됩니다.
Registration Form 구성 요소
단색 색 구성표를 사용하여 스큐어모픽 스타일로 디자인되고 전자 상거래 경험에 맞게 조정된 반응형 등록 양식 구성 요소입니다. 다크 모드를 지원하며 사용자 등록을 위한 대화형 입력 기능이 포함되어 있습니다.