검색 구성 요소

카테고리

구성 요소 참가 신청서

참가 신청서

새 사용자 계정을 만들기 위한 양식

Registration Form 구성 요소

마이크로 인터랙션과 어두운 테마 지원을 특징으로 하는 반응형 등록 양식 구성 요소로, Tailwind CSS로 스타일이 지정되었습니다.

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-8 w-11/12 max-w-md">
    <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200 mb-6">Create an Account</h2>
    <form>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-1" for="name">Full Name</label>
        <input type="text" id="name" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition duration-200" placeholder="John Doe" required>
      </div>

      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-1" for="email">Email Address</label>
        <input type="email" id="email" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition duration-200" placeholder="[email protected]" required>
      </div>

      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-1" for="password">Password</label>
        <input type="password" id="password" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition duration-200" placeholder="********" required>
      </div>

      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-1" for="avatar">Profile Picture</label>
        <div class="flex items-center mb-2">
          <img id="avatar" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 mr-3">
          <input type="file" class="bg-gray-200 dark:bg-gray-700 rounded p-2 dark:border-gray-700" accept="image/*">
        </div>
        <div class="text-xs text-gray-500 dark:text-gray-400">Upload a profile picture (optional)</div>
      </div>

      <button type="submit" class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 rounded transition duration-200">Register</button>
    </form>
  </div>
</div>

참가 신청서

Tailwind CSS를 사용하는 세련된 다크 모드 등록 양식 구성 요소로, 사용자 정보 및 반응형 디자인을 위한 필드를 제공합니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center bg-gray-900">
    <div class="bg-gray-800 rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-bold text-white text-center mb-6">Create Account</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-400 mb-2" for="username">Username</label>
                <input type="text" id="username" class="bg-gray-700 text-white border border-gray-600 rounded-lg w-full py-2 px-4" placeholder="Enter your username" required />
            </div>
            <div class="mb-4">
                <label class="block text-gray-400 mb-2" for="email">Email</label>
                <input type="email" id="email" class="bg-gray-700 text-white border border-gray-600 rounded-lg w-full py-2 px-4" placeholder="[email protected]" required />
            </div>
            <div class="mb-4">
                <label class="block text-gray-400 mb-2" for="password">Password</label>
                <input type="password" id="password" class="bg-gray-700 text-white border border-gray-600 rounded-lg w-full py-2 px-4" placeholder="Enter your password" required />
            </div>
            <div class="mb-6">
                <label class="block text-gray-400 mb-2" for="confirm-password">Confirm Password</label>
                <input type="password" id="confirm-password" class="bg-gray-700 text-white border border-gray-600 rounded-lg w-full py-2 px-4" placeholder="Confirm your password" required />
            </div>
            <div class="flex items-center justify-between mb-4">
                <input type="checkbox" id="terms" class="text-gray-400 border-gray-600" required />
                <label for="terms" class="text-gray-400"> I agree to the terms and conditions</label>
            </div>
            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-500 text-white py-2 rounded-lg font-semibold">Register</button>
        </form>
        <p class="text-gray-400 text-center mt-4">Already have an account? <a href="#" class="text-blue-500 hover:underline">Login</a></p>
    </div>
    <footer class="absolute bottom-0 left-0 w-full text-center bg-gray-800 py-2 text-gray-400">© 2023 Company Name</footer>
</div>

Registration Form 구성 요소

Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원하는 미니멀한 평면 디자인 등록 양식입니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Register</h2>
        <form class="mt-6">
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="name">Full Name</label>
                <input type="text" id="name" class="mt-1 p-2 block w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600" placeholder="Enter your full name" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="email">Email Address</label>
                <input type="email" id="email" class="mt-1 p-2 block w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600" placeholder="Enter your email" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="password">Password</label>
                <input type="password" id="password" class="mt-1 p-2 block w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600" placeholder="Enter your password" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="confirm-password">Confirm Password</label>
                <input type="password" id="confirm-password" class="mt-1 p-2 block w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600" placeholder="Confirm your password" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="avatar">Profile Picture</label>
                <div class="mt-1 flex justify-center">
                    <img src="https://i.picsum.photos/id/1014/200/200.jpg" alt="Avatar" class="rounded-full w-20 h-20 border-2 border-gray-300 dark:border-gray-600"/>
                </div>
                <p class="text-center text-gray-500 dark:text-gray-400">Random Avatar</p>
            </div>
            <button type="submit" class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50">Register</button>
        </form>
        <p class="mt-4 text-gray-600 dark:text-gray-400 text-center">Already have an account? <a href="#" class="text-blue-500 hover:text-blue-700">Login</a></p>
    </div>
</div>

Registration Form 구성 요소

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

열다 미리 보기

                <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>

참가 신청서

Tailwind CSS로 스타일링된 미니멀리스트 등록 양식 구성 요소로, 다크 모드와 반응형 디자인 기능을 지원합니다.

열다 미리 보기

                <div class="min-h-screen bg-white dark:bg-gray-900 flex items-center justify-center">
    <form class="bg-gray-100 dark:bg-gray-800 p-8 rounded-lg shadow-lg w-full max-w-md">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center mb-6">Register</h2>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2" for="name">Full Name</label>
            <input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 focus:outline-none focus:shadow-outline" placeholder="John Doe" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2" for="email">Email</label>
            <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 focus:outline-none focus:shadow-outline" placeholder="[email protected]" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2" for="password">Password</label>
            <input type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 focus:outline-none focus:shadow-outline" placeholder="********" required />
        </div>
        <div class="flex items-center justify-between mb-6">
            <div class="flex items-center">
                <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600 focus:ring focus:ring-blue-500" id="terms" required />
                <label for="terms" class="ml-2 block text-gray-700 dark:text-gray-300 text-sm">I accept the Terms and Conditions</label>
            </div>
        </div>
        <div class="mb-6">
            <button type="submit" class="w-full bg-blue-600 dark:bg-blue-500 text-white font-semibold py-2 px-4 rounded hover:bg-blue-700 dark:hover:bg-blue-400 focus:outline-none focus:shadow-outline">Register</button>
        </div>
        <p class="text-center text-gray-600 dark:text-gray-400 text-sm">Already have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Login here</a></p>
    </form>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
        }
    }
</style>