CCHub Logo CCHub Tailwind Collection
구성 요소 타임라인 타임라인 구성 요소

타임라인 구성 요소

단색 색 구성표를 사용하는 3D 디자인 스타일의 반응형 타임라인 구성 요소로, 포트폴리오에서 작업이나 제품을 선보이도록 설계되었습니다. 여기에는 여러 대화형 요소가 포함되어 있으며 어두운 테마를 지원합니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center bg-gray-100 dark:bg-gray-900 py-10">
    <div class="relative w-full max-w-4xl">
        <div class="border-l-4 border-indigo-600 dark:border-indigo-300">
            <div class="mb-8 ml-6">
                <div class="flex items-center">
                    <div class="h-10 w-10 rounded-full bg-indigo-600 dark:bg-indigo-300 shadow-lg flex items-center justify-center">
                        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full" />
                    </div>
                    <div class="ml-4">
                        <p class="text-indigo-600 dark:text-indigo-300 font-semibold">Project Title 1</p>
                        <p class="text-gray-700 dark:text-gray-200">Short description of the project showcasing the main features and achievements.</p>
                        <img src="https://picsum.photos/500/300?random=1" alt="Project Image" class="mt-2 rounded-lg shadow-md" />
                    </div>
                </div>
            </div>
            <div class="mb-8 ml-6">
                <div class="flex items-center">
                    <div class="h-10 w-10 rounded-full bg-indigo-600 dark:bg-indigo-300 shadow-lg flex items-center justify-center">
                        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full" />
                    </div>
                    <div class="ml-4">
                        <p class="text-indigo-600 dark:text-indigo-300 font-semibold">Project Title 2</p>
                        <p class="text-gray-700 dark:text-gray-200">Short description of the project showcasing the main features and achievements.</p>
                        <img src="https://picsum.photos/500/300?random=2" alt="Project Image" class="mt-2 rounded-lg shadow-md" />
                    </div>
                </div>
            </div>
            <div class="mb-8 ml-6">
                <div class="flex items-center">
                    <div class="h-10 w-10 rounded-full bg-indigo-600 dark:bg-indigo-300 shadow-lg flex items-center justify-center">
                        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="h-10 w-10 rounded-full" />
                    </div>
                    <div class="ml-4">
                        <p class="text-indigo-600 dark:text-indigo-300 font-semibold">Project Title 3</p>
                        <p class="text-gray-700 dark:text-gray-200">Short description of the project showcasing the main features and achievements.</p>
                        <img src="https://picsum.photos/500/300?random=3" alt="Project Image" class="mt-2 rounded-lg shadow-md" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

관련 구성 요소

게임 타임라인 구성 요소

게임 웹사이트에 최적화된 미묘한 3D 디자인을 갖춘 단순하고 생동감 넘치며 반응이 빠른 타임라인 구성 요소로, 다크 모드를 지원합니다.

열다

타임라인 구성 요소

네온/글로우 효과와 가을 색 구성표가 있는 복잡하고 반응이 빠른 타임라인 구성 요소로, 다크 모드 지원을 포함하여 포럼 또는 커뮤니티 플랫폼에 적합합니다.

열다

Glassmorphism 타임라인 컴포넌트

반응형 타임라인 컴포넌트는 트라이어딕 색 구성표가 있는 glassmorphism 스타일을 특징으로 합니다. 여기에는 흐림 효과가 있는 젖빛 유리와 같은 반투명 요소가 포함되어 있으며 블로그 및 콘텐츠 소비에 적합하며 다크 모드를 지원합니다.

열다