CCHub Logo CCHub Tailwind Collection
구성 요소 컨테이너 컨테이너 구성 요소

컨테이너 구성 요소

어두운 테마와 반응형 디자인을 갖춘 스큐어모픽 포트폴리오 컨테이너 구성 요소로, 인터랙티브 요소로 작업과 제품을 선보입니다.

미리 보기

HTML 코드 

<div class="bg-gray-800 p-5 rounded-lg shadow-lg dark:bg-gray-900 transition-all">
    <h2 class="text-3xl font-bold text-gray-200 dark:text-gray-100 mb-5">My Portfolio</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-gray-700 dark:bg-gray-800">
            <img class="w-full" src="https://picsum.photos/300/200?random=1" alt="Portfolio Item">
            <div class="p-5">
                <div class="font-bold text-xl mb-2 text-gray-200 dark:text-gray-100">Project Title 1</div>
                <p class="text-gray-300 dark:text-gray-400">A brief description of the project showcasing my skills and efforts on this particular piece.</p>
            </div>
        </div>
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-gray-700 dark:bg-gray-800">
            <img class="w-full" src="https://picsum.photos/300/200?random=2" alt="Portfolio Item">
            <div class="p-5">
                <div class="font-bold text-xl mb-2 text-gray-200 dark:text-gray-100">Project Title 2</div>
                <p class="text-gray-300 dark:text-gray-400">A brief description of another project showcasing unique features and creative solutions.</p>
            </div>
        </div>
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-gray-700 dark:bg-gray-800">
            <img class="w-full" src="https://picsum.photos/300/200?random=3" alt="Portfolio Item">
            <div class="p-5">
                <div class="font-bold text-xl mb-2 text-gray-200 dark:text-gray-100">Project Title 3</div>
                <p class="text-gray-300 dark:text-gray-400">Description of the project highlighting my contributions and outcomes of the work.</p>
            </div>
        </div>
    </div>
    <div class="mt-5 text-center">
        <h3 class="text-xl font-bold text-gray-200 dark:text-gray-100 mb-3">Contact Me</h3>
        <div class="flex justify-center space-x-4">
            <a href="#" class="flex items-center text-gray-300 dark:text-gray-400 hover:text-gray-200 dark:hover:text-gray-100">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-10 h-10 rounded-full mr-2" alt="Avatar"> My Name
            </a>
        </div>
    </div>
</div>

관련 구성 요소

부동산 리스팅 카드 - 수채화/네온

수채화/예술적 부드러운 배경과 네온/일렉트릭 컬러 구성표가 있는 복잡한 부동산 리스팅 카드입니다. 부동산 세부 정보, 에이전트 정보 및 가격을 제공하며 완전한 응답성과 다크 모드를 지원합니다.

열다

Neon_Glow_Healthcare_Container_Component

의료 애플리케이션을 위한 복잡하고 반응이 빠른 컨테이너 구성 요소로, 네온/글로우 흑백 색 구성표와 생생한 악센트가 있습니다. 여러 대화형 요소, 다크 모드 지원 및 시맨틱 HTML을 제공합니다.

열다

컨테이너 구성 요소

전자 상거래를 위한 브루탈리즘 스타일로 설계된 컨테이너 구성 요소로, Tailwind CSS를 사용하여 어두운 테마를 지원하는 반응형 레이아웃을 특징으로 합니다.

열다