CCHub Logo CCHub Tailwind Collection
구성 요소 콘텐츠 표시 구성 요소 Content Display 구성 요소

Content Display 구성 요소

단순하고 반응이 빠른 콘텐츠 디스플레이 구성 요소는 보색이 있는 브루탈리즘 스타일로 디자인되었습니다. 비즈니스/기업 웹사이트에 적합하며 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="bg-white dark:bg-gray-800 text-black dark:text-white border border-black dark:border-white p-6 max-w-lg mx-auto">
    <h1 class="text-3xl font-bold mb-4">Company Title</h1>
    <img src="https://picsum.photos/500/300" alt="Content Image" class="w-full rounded-lg mb-4">
    <p class="text-lg mb-6">This is a brief description of the company. Emphasizing clear, bold statements to convey professionalism and competence in a raw form.</p>
    <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
        <div class="">
            <h2 class="text-xl font-semibold">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">CEO</p>
        </div>
    </div>
</div>

관련 구성 요소

Content Display Components 컴포넌트

Glassmorphism Content Display Component with Earth Tones

열다

Content Display 구성 요소

어두운 테마의 전자 상거래를 위해 스큐어모픽 스타일로 설계된 Content Display Component입니다. 유쾌한 미학을 위해 유사한 색 구성표를 사용하여 최소한의 요소로 제품을 선보입니다.

열다

부동산 리스팅 카드 - Swiss Pastel

스위스/인터내셔널 타이포그래피 스타일과 파스텔 색상 구성표가 있는 간단하고 깨끗하며 반응이 빠른 부동산 리스팅 카드로 부동산 플랫폼에 적합합니다. 다크 모드 지원이 포함됩니다.

열다