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

Registration Form 구성 요소

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

미리 보기

HTML 코드 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <form class="bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-blur-md p-8 w-full max-w-md">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Register</h2>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="username">Username</label>
            <input class="block w-full px-4 py-2 border rounded-md focus:ring focus:ring-blue-500 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" type="text" id="username" placeholder="Your Username" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
            <input class="block w-full px-4 py-2 border rounded-md focus:ring focus:ring-blue-500 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" type="email" id="email" placeholder="Your Email" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
            <input class="block w-full px-4 py-2 border rounded-md focus:ring focus:ring-blue-500 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" type="password" id="password" placeholder="Your Password" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="avatar">Avatar</label>
            <div class="flex items-center">
                <img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3 border-2 border-gray-300 dark:border-gray-600" />
                <input class="block w-full px-4 py-2 border rounded-md focus:ring focus:ring-blue-500 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" type="text" id="avatar" value="https://randomuser.me/api/portraits/men/10.jpg" readonly />
            </div>
        </div>
        <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-md shadow focus:outline-none focus:ring focus:ring-blue-500 mt-4">Register</button>
    </form>
</div>

관련 구성 요소

Registration Form 구성 요소

Tailwind CSS를 사용하여 Neumorphism 디자인, 회색조 색 구성표, 중간 정도의 복잡성 및 반응형 어두운 테마를 지원하는 등록 양식 구성 요소입니다.

열다

Registration Form 구성 요소

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

열다

Registration Form Component - 음악/오디오 테마

스위스/국제 타이포그래피 스타일과 가을 색 구성표를 갖춘 깨끗하고 미니멀한 등록 양식 구성 요소로, 음악/오디오 플랫폼을 위해 설계되었습니다. 완벽하게 반응형이고 다크 모드를 지원하며 시맨틱 HTML을 사용합니다.

열다