CCHub Logo CCHub Tailwind Collection
구성 요소 기능적 구성 요소 기능적 구성 요소 구성 요소 - Brutalism Style

기능적 구성 요소 구성 요소 - Brutalism Style

Tailwind CSS를 사용하여 브루탈리즘 스타일로 설계된 기능적 웹 구성 요소입니다. 이 구성 요소는 고대비, 반응형 효과 및 어두운 테마 지원을 갖춘 대담한 레이아웃을 특징으로 합니다. 여기에는 시각적 호소력을 위한 자리 표시자 이미지와 아바타가 포함되어 있습니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center min-h-screen p-6 bg-white dark:bg-gray-800">
    <div class="container mx-auto w-full max-w-4xl p-6 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg">
        <h1 class="text-4xl font-bold text-black dark:text-white mb-4">Brutalist Functional Component</h1>
        <p class="text-lg text-gray-800 dark:text-gray-300 mb-6">
            This component showcases a raw and bold design aesthetic typical of brutalism. 
            It emphasizes usability and content over polished interfaces.
        </p>
        <div class="flex flex-wrap justify-between gap-4">
            <div class="w-full md:w-1/2 bg-gray-300 dark:bg-gray-600 p-4 rounded shadow">
                <img src="https://picsum.photos/400/300" alt="Random Image" class="w-full h-auto rounded mb-2">
                <h2 class="text-xl font-semibold text-black dark:text-white">Section 1</h2>
                <p class="text-gray-700 dark:text-gray-200">This section contains a brief description with a bold design that embraces simplicity.</p>
            </div>
            <div class="w-full md:w-1/2 bg-gray-300 dark:bg-gray-600 p-4 rounded shadow">
                <img src="https://picsum.photos/400/301" alt="Random Image" class="w-full h-auto rounded mb-2">
                <h2 class="text-xl font-semibold text-black dark:text-white">Section 2</h2>
                <p class="text-gray-700 dark:text-gray-200">Another section to demonstrate the design. High contrast provides a striking look.</p>
            </div>
        </div>
        <div class="mt-6 border-t border-gray-500 dark:border-gray-400 pt-4">
            <h2 class="text-2xl font-bold text-black dark:text-white">User Information</h2>
            <div class="flex items-center gap-4 mt-3">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full shadow">
                <div>
                    <h3 class="text-lg font-semibold text-black dark:text-white">John Doe</h3>
                    <p class="text-gray-600 dark:text-gray-300">Web Developer</p>
                </div>
            </div>
        </div>
    </div>
</div>

관련 구성 요소

Functional Components 구성 요소

Material Design 원칙, 유사한 색 구성표 및 적당한 복잡성을 사용하는 기능적 구성 요소가 있는 대시보드 구성 요소입니다. 이 구성 요소에는 Tailwind CSS를 사용하는 반응형 디자인 및 어두운 테마 지원이 포함됩니다. JavaScript는 포함되어 있지 않습니다.

열다

E-commerce 기능 구성 요소

미니멀리스트 플랫 디자인(Minimalist Flat Design) 트라이어드 색 구성표와 반응형 다크 모드 지원을 제공하는 전자 상거래 구성 요소.

열다

Functional Components 구성 요소

블로그 및 콘텐츠 소비를 위해 설계된 간단한 웹 구성 요소로, 매력적인 마이크로 인터랙션과 어두운 테마를 지원하는 그레이스케일 색 구성표를 특징으로 합니다.

열다