CCHub Logo CCHub Tailwind Collection
구성 요소 열 Columns 구성 요소

Columns 구성 요소

어두운 모드 지원으로 포트폴리오를 표시하도록 설계된 반응형 열 구성 요소로, 회색조 색 구성표와 Tailwind CSS를 사용합니다.

미리 보기

HTML 코드 

<div class="container mx-auto px-4 py-8">
    <h2 class="text-3xl font-bold text-white text-center mb-8">Portfolio Showcase</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/400/300?random=1" alt="Project 1" class="w-full h-40 object-cover rounded-t-lg">
            <h3 class="text-xl font-semibold text-white mt-4">Project Title 1</h3>
            <p class="text-gray-400 mt-2">Brief description of the project goes here. Explaining the key features and technologies used.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700">
                <span class="ml-2 text-gray-300">John Doe</span>
            </div>
        </div>
        <div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/400/300?random=2" alt="Project 2" class="w-full h-40 object-cover rounded-t-lg">
            <h3 class="text-xl font-semibold text-white mt-4">Project Title 2</h3>
            <p class="text-gray-400 mt-2">Brief description of the project goes here. Explaining the key features and technologies used.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700">
                <span class="ml-2 text-gray-300">Jane Smith</span>
            </div>
        </div>
        <div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/400/300?random=3" alt="Project 3" class="w-full h-40 object-cover rounded-t-lg">
            <h3 class="text-xl font-semibold text-white mt-4">Project Title 3</h3>
            <p class="text-gray-400 mt-2">Brief description of the project goes here. Explaining the key features and technologies used.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700">
                <span class="ml-2 text-gray-300">Alice Johnson</span>
            </div>
        </div>
        <div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/400/300?random=4" alt="Project 4" class="w-full h-40 object-cover rounded-t-lg">
            <h3 class="text-xl font-semibold text-white mt-4">Project Title 4</h3>
            <p class="text-gray-400 mt-2">Brief description of the project goes here. Explaining the key features and technologies used.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700">
                <span class="ml-2 text-gray-300">Mark Brown</span>
            </div>
        </div>
        <div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/400/300?random=5" alt="Project 5" class="w-full h-40 object-cover rounded-t-lg">
            <h3 class="text-xl font-semibold text-white mt-4">Project Title 5</h3>
            <p class="text-gray-400 mt-2">Brief description of the project goes here. Explaining the key features and technologies used.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700">
                <span class="ml-2 text-gray-300">Emma Williams</span>
            </div>
        </div>
        <div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/400/300?random=6" alt="Project 6" class="w-full h-40 object-cover rounded-t-lg">
            <h3 class="text-xl font-semibold text-white mt-4">Project Title 6</h3>
            <p class="text-gray-400 mt-2">Brief description of the project goes here. Explaining the key features and technologies used.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/6.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700">
                <span class="ml-2 text-gray-300">Oliver Davis</span>
            </div>
        </div>
    </div>
</div>

관련 구성 요소

Brutalism_Portfolio_Columns_Component

브루탈리즘에서 영감을 받은 다중 열 포트폴리오 구성 요소로, 차분한 색상이 있으며 큰 타이포그래피, 고대비 테두리 및 비대칭 레이아웃이 특징입니다. 다크 모드 지원이 포함되어 있으며 제목, 설명 및 이미지와 함께 프로젝트를 보여줍니다.

열다

Luxury_Dating_Columns_Component

데이트/소셜 플랫폼을 위한 단순하고 우아한 3열 레이아웃 구성 요소로, 검은색, 흰색 및 강조 색상 팔레트, 완전한 응답성 및 다크 모드 지원으로 고급스러운 미학을 특징으로 합니다.

열다

Playful_Documentation_Columns_Component

장난스럽고 다채로운 문서/위키 칼럼 구성 요소로, 일몰/따뜻한 톤, 둥근 요소, 다크 모드를 지원합니다. 모든 장치에서 응답성을 제공하도록 설계되었습니다.

열다