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

타임라인 구성 요소

향수를 불러일으키는 80년대/90년대 미학이 있는 작품이나 제품을 선보이도록 설계된 간단한 레트로/빈티지 타임라인 구성 요소로, 다크 모드 지원을 위해 유사한 색 구성표를 사용합니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center p-4">
    <h2 class="text-2xl font-bold text-white mb-4 dark:text-gray-200">Portfolio Timeline</h2>
    <div class="flex flex-col space-y-8">
        <div class="flex flex-row items-start dark:bg-gray-800 bg-gray-200 rounded-lg shadow-md p-4 w-full max-w-lg">
            <div class="flex-shrink-0 mr-4">
                <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            </div>
            <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-300">Project Title 1</h3>
                <p class="text-gray-700 dark:text-gray-400">Brief description of the project, showcasing the main features and achievements.</p>
                <img src="https://picsum.photos/200/100?random=1" alt="Project Image" class="mt-2 rounded-md">
            </div>
        </div>
        <div class="flex flex-row items-start dark:bg-gray-800 bg-gray-200 rounded-lg shadow-md p-4 w-full max-w-lg">
            <div class="flex-shrink-0 mr-4">
                <img src="https://randomuser.me/api/portraits/thumb/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            </div>
            <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-300">Project Title 2</h3>
                <p class="text-gray-700 dark:text-gray-400">Brief description of the project, showcasing the main features and achievements.</p>
                <img src="https://picsum.photos/200/100?random=2" alt="Project Image" class="mt-2 rounded-md">
            </div>
        </div>
        <div class="flex flex-row items-start dark:bg-gray-800 bg-gray-200 rounded-lg shadow-md p-4 w-full max-w-lg">
            <div class="flex-shrink-0 mr-4">
                <img src="https://randomuser.me/api/portraits/thumb/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            </div>
            <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-300">Project Title 3</h3>
                <p class="text-gray-700 dark:text-gray-400">Brief description of the project, showcasing the main features and achievements.</p>
                <img src="https://picsum.photos/200/100?random=3" alt="Project Image" class="mt-2 rounded-md">
            </div>
        </div>
    </div>
</div>

관련 구성 요소

타임라인 구성 요소

비즈니스/기업 웹사이트에 적합한 그레이스케일 색 구성표가 있는 스큐어모픽 스타일로 설계된 간단한 반응형 타임라인 구성 요소입니다. 어두운 테마를 지원하며 스타일링을 위해 Tailwind CSS를 사용합니다.

열다

Glassmorphism 타임라인 컴포넌트

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

열다

타임라인 구성 요소

다크 모드를 지원하고 Tailwind CSS를 사용하는 마이크로 인터랙션이 있는 반응형 타임라인 구성 요소입니다. JavaScript가 필요하지 않습니다.

열다