CCHub Logo CCHub Tailwind Collection
구성 요소 콘텐츠 표시 구성 요소 Content Display Components 컴포넌트

Content Display Components 컴포넌트

비즈니스/기업 웹 사이트를 위해 설계된 반응형 콘텐츠 디스플레이 구성 요소로, 다크 모드를 지원하고 생생한 색 구성표를 제공합니다. 여기에는 사용자 아바타, 텍스트 콘텐츠 및 이미지에 대한 섹션이 포함됩니다.

미리 보기

HTML 코드 

<div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold mb-4">Our Team</h2>
    <div class="grid md:grid-cols-2 gap-5">
        <div class="bg-gray-800 p-4 rounded-lg transition-shadow duration-300 hover:shadow-xl">
            <img class="w-full rounded-lg" src="https://picsum.photos/300/200" alt="Content Image">
            <div class="flex items-center mt-2">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
                <div class="ml-3">
                    <p class="text-lg font-semibold">John Doe</p>
                    <p class="text-sm text-gray-400">CEO</p>
                </div>
            </div>
            <p class="mt-2 text-gray-300">John is the visionary behind the company, driving innovation and strategies.</p>
        </div>
        <div class="bg-gray-800 p-4 rounded-lg transition-shadow duration-300 hover:shadow-xl">
            <img class="w-full rounded-lg" src="https://picsum.photos/300/201" alt="Content Image">
            <div class="flex items-center mt-2">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
                <div class="ml-3">
                    <p class="text-lg font-semibold">Jane Smith</p>
                    <p class="text-sm text-gray-400">CTO</p>
                </div>
            </div>
            <p class="mt-2 text-gray-300">Jane oversees all technical aspects, ensuring seamless operations.</p>
        </div>
    </div>
    <h2 class="text-2xl font-bold mt-10 mb-4">Company Achievements</h2>
    <div class="bg-gray-800 p-4 rounded-lg transition-shadow duration-300 hover:shadow-xl">
        <ul class="list-disc list-inside">
            <li class="mt-2 text-gray-300">Awarded "Best Startup of the Year".</li>
            <li class="mt-2 text-gray-300">Reached over 10,000 active users in under a year.</li>
            <li class="mt-2 text-gray-300">Secured $1 million in funding.</li>
        </ul>
    </div>
</div>

관련 구성 요소

Swiss_International_Typography_Content_Display_Component

대시보드를 위한 깨끗하고 미니멀한 콘텐츠 디스플레이 구성 요소로, 멋진 무채색과 완전한 응답성으로 타이포그래피와 그리드 시스템을 강조합니다.

열다

Content Display 구성 요소

반응형 콘텐츠 표시 구성 요소로, 사용자 작업에 초점을 맞춘 매력적인 애니메이션과 마이크로 상호 작용을 통합합니다. 여기에는 다크 모드에 대한 지원과 이미지 및 아바타에 대한 자리 표시자가 포함됩니다.

열다

Content Display 구성 요소

3D 스타일의 콘텐츠 디스플레이 구성 요소로, 포트폴리오 작업 또는 제품을 회색 음영 색 구성표와 반응형 디자인으로 보여주며, 다크 모드 지원을 포함합니다.

열다