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

타임라인 구성 요소

미니멀한 플랫 디자인 타임라인 구성 요소는 포트폴리오에서 작업이나 제품을 보여주기 위한 것으로, 생생한 색상과 어두운 테마를 지원합니다.

미리 보기

HTML 코드 

<div class="flex flex-col space-y-8 p-8 bg-white dark:bg-gray-800">
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-blue-500">
        <div class="ml-4">
            <h3 class="text-lg font-semibold dark:text-white">Project Title 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            <span class="text-blue-500 dark:text-blue-400">January 2022</span>
        </div>
    </div>
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-red-500">
        <div class="ml-4">
            <h3 class="text-lg font-semibold dark:text-white">Project Title 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            <span class="text-red-500 dark:text-red-400">March 2022</span>
        </div>
    </div>
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-green-500">
        <div class="ml-4">
            <h3 class="text-lg font-semibold dark:text-white">Project Title 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            <span class="text-green-500 dark:text-green-400">May 2022</span>
        </div>
    </div>
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-purple-500">
        <div class="ml-4">
            <h3 class="text-lg font-semibold dark:text-white">Project Title 4</h3>
            <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            <span class="text-purple-500 dark:text-purple-400">August 2022</span>
        </div>
    </div>
</div>

관련 구성 요소

타임라인 구성 요소

3D 디자인, 반응형 효과 및 어두운 테마를 지원하는 타임라인 구성 요소

열다

타임라인 구성 요소

Glassmorphism 디자인, 보색 구성표 및 어두운 테마 지원을 갖춘 반응형 타임라인 구성 요소로 비즈니스 웹 사이트에 적합합니다. 흐림 효과가 있는 젖빛 유리와 같은 반투명 요소가 특징입니다.

열다

스큐어모픽 타임라인 컴포넌트

반응형 효과와 어두운 테마를 지원하는 스큐어모픽 타임라인 컴포넌트로, Tailwind CSS를 사용하여 제작되었습니다. JavaScript는 필요하지 않으며 HTML과 CSS 만 필요합니다.

열다