CCHub Logo CCHub Tailwind Collection
구성 요소 기능적 구성 요소 Functional Components 구성 요소

Functional Components 구성 요소

브루탈리즘(Brutalism) 스타일과 파스텔 색상으로 디자인된 소셜 미디어 구성 요소로, 다크 모드를 지원하는 상호 작용을 위한 복잡한 인터페이스를 갖추고 있습니다.

미리 보기

HTML 코드 

<div class="max-w-3xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700">
    <header class="flex items-center space-x-4 border-b border-gray-300 dark:border-gray-700 pb-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full">
        <div>
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
        </div>
    </header>
    <div class="my-4">
        <p class="text-gray-800 dark:text-gray-200">
            This is a sample post showcasing Brutalism in design. 
            The layout is raw and bold, inviting interactions with its visually striking style!
        </p>
        <img src="https://picsum.photos/800/400?random=1" alt="Random Image" class="mt-4 w-full rounded-lg shadow-md">
    </div>
    <footer class="flex justify-between border-t border-gray-300 dark:border-gray-700 pt-4 mt-4">
        <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none">❤️ Like</button>
        <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none">💬 Comment</button>
        <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none">🔗 Share</button>
    </footer>
</div>

관련 구성 요소

Glassmorphic 뮤직 플레이어 컨트롤

세피아/브라운 톤의 glassmorphic 뮤직 플레이어 제어 구성 요소로, 젖빛 유리와 같은 반투명 요소와 흐림 효과가 특징입니다. 반응이 빠르고 다크 모드를 지원하며 음악 스트리밍 및 오디오 플랫폼에 적합합니다.

열다

헬스케어 기능 구성 요소

헬스케어 애플리케이션을 위한 반응형 및 주제별 구성 요소로, 산업 디자인, 차분한 색상 및 다크 모드 지원을 특징으로 합니다. 빠른 작업으로 환자/센서 데이터를 표시합니다.

열다

게임 기능 하이라이트

반응형 게임 기능은 타이포그래피와 그리드 시스템을 강조하는 깔끔하고 미니멀한 디자인의 구성 요소를 강조하며, 따뜻한 중립 색상을 사용하고 다크 모드를 지원합니다. 큰 이미지, 제목, 설명 및 작업 버튼이 있습니다.

열다