CCHub Logo CCHub Tailwind Collection
구성 요소 양식 Forms 구성 요소

Forms 구성 요소

Tailwind CSS를 사용하여 머티리얼 디자인 스타일로 디자인된 반응형 양식 구성 요소로, 그리드 레이아웃, 그림자 및 다크 모드 지원을 제공합니다.

미리 보기

HTML 코드 

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-md mx-auto">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Contact Us</h2>
    <form>
        <div class="grid grid-cols-1 gap-4">
            <div>
                <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
                <input type="text" id="name" class="mt-1 block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:outline-none" placeholder="Your Name">
            </div>
            <div>
                <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
                <input type="email" id="email" class="mt-1 block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:outline-none" placeholder="Your Email">
            </div>
            <div>
                <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Message</label>
                <textarea id="message" rows="4" class="mt-1 block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:outline-none" placeholder="Your Message"></textarea>
            </div>
            <div class="flex items-center">
                <input type="checkbox" id="subscribe" class="mr-2 leading-tight">
                <label for="subscribe" class="text-sm text-gray-600 dark:text-gray-400">Subscribe to our newsletter</label>
            </div>
            <button type="submit" class="w-full mt-4 bg-indigo-600 text-white py-2 rounded-md shadow hover:bg-indigo-700 focus:outline-none focus:ring focus:ring-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400 dark:focus:ring-indigo-400">Submit</button>
        </div>
    </form>
    <div class="mt-6 flex justify-center">
        <img src="https://picsum.photos/200/100" alt="Random Placeholder" class="rounded-lg shadow-md">
    </div>
    <div class="mt-4 flex justify-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-lg">
    </div>
</div>

관련 구성 요소

브루탈리즘 그레이스케일 인더스트리얼 폼

회색 음영 구성표가 있는 복잡한 브루탈리즘 스타일의 양식 구성 요소로, 산업 및 제조 응용 분야를 위해 설계되었습니다. 고대비 요소, 특이한 레이아웃, 다크 모드 지원을 통한 완전한 응답성을 제공합니다.

열다

Forms 구성 요소

소셜 미디어를 위한 복잡하고 반응이 빠른 어두운 테마의 지원 양식 구성 요소는 3D 단색 디자인과 인터페이스합니다. 다크 모드에 dark: 접두사가 있는 Tailwind CSS를 사용하며 예제 양식 요소를 포함합니다.

열다

Corporate_Banking_Login_Form

기업 금융 및 은행 애플리케이션에 적합한 미니멀하고 평평한 디자인의 로그인 양식으로, 전문적인 블루 톤, 완전한 응답성 및 다크 모드 지원을 특징으로 합니다.

열다