CCHub Logo CCHub Tailwind Collection
구성 요소 양식 브루탈리스트 양식 구성 요소

브루탈리스트 양식 구성 요소

소셜 미디어를 위한 단순한 브루탈리즘 스타일의 양식 구성 요소입니다. 그레이스케일 색상을 사용하는 고대비, 원시 디자인이 특징이며 다크 모드 지원으로 반응합니다.

미리 보기

HTML 코드 

<div class="max-w-md mx-auto p-5 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Sign Up</h2>
    <form>
        <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
        <input type="text" class="block w-full p-2 border border-gray-300 dark:border-gray-600 rounded mb-4 focus:outline-none focus:ring focus:ring-gray-300 dark:focus:ring-gray-600" placeholder="Your Name" required>
        
        <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
        <input type="email" class="block w-full p-2 border border-gray-300 dark:border-gray-600 rounded mb-4 focus:outline-none focus:ring focus:ring-gray-300 dark:focus:ring-gray-600" placeholder="Your Email" required>
        
        <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Profile Picture</label>
        <div class="flex items-center mb-4">
            <img src="https://picsum.photos/50" alt="Profile Picture" class="rounded-full border border-gray-300 dark:border-gray-600 mr-3">
            <input type="file" class="block w-full p-2 border border-gray-300 dark:border-gray-600 rounded"> 
        </div>
        
        <button type="submit" class="w-full py-2 bg-gray-900 dark:bg-gray-200 text-white dark:text-gray-900 hover:bg-gray-700 dark:hover:bg-gray-300 rounded">Submit</button>
    </form>
</div>

관련 구성 요소

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

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

열다

Forms 구성 요소

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

열다

Gaming_Material_Form

머티리얼 디자인(Material Design) 원칙에서 영감을 받은 반응형 게임 테마 형태로, 트라이어딕 색상, 심도 효과, 다크 모드 지원을 특징으로 합니다. 로그인, 등록 또는 게임 설정에 적합합니다.

열다