타임라인 구성 요소
블로그 및 콘텐츠 소비를 위해 설계된 미니멀리스트 타임라인 구성 요소로, Tailwind CSS를 사용하여 흙색 색상과 다크 모드를 지원합니다.
HTML 코드
<div class="container mx-auto p-6">
<h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Timeline</h1>
<div class="relative">
<div class="border-l border-gray-300 dark:border-gray-700 ml-6">
<div class="mb-6">
<div class="flex items-center">
<div class="bg-green-500 rounded-full w-6 h-6 mr-4">
<img src="https://picsum.photos/seed/1/100" alt="Event Image" class="rounded-full" />
</div>
<div>
<h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Event Title 1</h2>
<p class="text-gray-600 dark:text-gray-400">Description of the event that took place. It was a significant moment.</p>
<span class="text-xs text-gray-500 dark:text-gray-500">Date: 2023-02-14</span>
</div>
</div>
</div>
<div class="mb-6">
<div class="flex items-center">
<div class="bg-green-500 rounded-full w-6 h-6 mr-4">
<img src="https://picsum.photos/seed/2/100" alt="Event Image" class="rounded-full" />
</div>
<div>
<h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Event Title 2</h2>
<p class="text-gray-600 dark:text-gray-400">Another description of an important event that happened.</p>
<span class="text-xs text-gray-500 dark:text-gray-500">Date: 2023-03-01</span>
</div>
</div>
</div>
<div class="mb-6">
<div class="flex items-center">
<div class="bg-green-500 rounded-full w-6 h-6 mr-4">
<img src="https://picsum.photos/seed/3/100" alt="Event Image" class="rounded-full" />
</div>
<div>
<h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Event Title 3</h2>
<p class="text-gray-600 dark:text-gray-400">A brief overview of an event that marked a milestone.</p>
<span class="text-xs text-gray-500 dark:text-gray-500">Date: 2023-04-10</span>
</div>
</div>
</div>
<div class="mb-6">
<div class="flex items-center">
<div class="bg-green-500 rounded-full w-6 h-6 mr-4">
<img src="https://picsum.photos/seed/4/100" alt="Event Image" class="rounded-full" />
</div>
<div>
<h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Event Title 4</h2>
<p class="text-gray-600 dark:text-gray-400">Final event description summarizing the timeline.</p>
<span class="text-xs text-gray-500 dark:text-gray-500">Date: 2023-05-15</span>
</div>
</div>
</div>
</div>
</div>
</div>관련 구성 요소
타임라인 구성 요소
스큐어모픽 디자인의 반응형 타임라인 구성 요소, 유사한 색 구성표, 어두운 테마를 지원하는 블로그/콘텐츠 웹사이트의 중간 복잡성. JavaScript가 필요하지 않으며 다크 모드를 지원하는 Tailwind CSS를 사용합니다. picsum.photos의 이미지와 randomuser.me 의 아바타가 사용됩니다.
타임라인 구성 요소
비즈니스/기업 웹사이트에 적합한 그레이스케일 색 구성표가 있는 스큐어모픽 스타일로 설계된 간단한 반응형 타임라인 구성 요소입니다. 어두운 테마를 지원하며 스타일링을 위해 Tailwind CSS를 사용합니다.