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