CCHub Logo CCHub Tailwind Collection
구성 요소 양식 3D 양식 구성 요소

3D 양식 구성 요소

소셜 미디어 인터페이스를 위한 3D 디자인 요소와 파스텔 색상이 있는 간단하고 반응이 빠른 양식 구성 요소로, 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="max-w-md mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Join Our Community</h2>
    <form>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">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-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" placeholder="Enter your name">
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 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-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" placeholder="Enter your email">
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="avatar">Upload Avatar</label>
            <input type="file" id="avatar" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline">
        </div>
        <div>
            <button type="submit" class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Join</button>
        </div>
    </form>
    <div class="mt-4">
        <img src="https://picsum.photos/200" alt="Random Design" class="rounded-md shadow-lg mt-3 w-full">
    </div>
</div>

관련 구성 요소

Forms 구성 요소

Swiss/International Typography 원칙에 따라 디자인된 깨끗하고 미니멀한 형태의 구성 요소로, 보석 톤의 색 구성표가 특징입니다. 전문 컨설팅 또는 서비스 웹 사이트에 이상적이며 완전한 응답성과 다크 모드 지원을 제공합니다.

열다

Healthcare_Form_Gradient_Neon

네온/일렉트릭 컬러 그라디언트와 부드러운 전환이 있는 복잡하고 반응이 빠른 의료 양식 구성 요소로, 다크 모드를 지원합니다. 여러 대화형 요소가 있는 의료 응용 분야를 위해 설계되었습니다.

열다

Forms 구성 요소

블로그/컨텐츠 웹 사이트에 대한 어두운 테마 지원이 있는 복잡하고 반응형 양식 구성 요소로, 유사한 색 구성표를 사용하여 미니멀리스트/플랫 스타일로 디자인되었습니다.

열다