타임라인 구성 요소
비즈니스/기업 웹사이트에 적합한 그레이스케일 색 구성표가 있는 스큐어모픽 스타일로 설계된 간단한 반응형 타임라인 구성 요소입니다. 어두운 테마를 지원하며 스타일링을 위해 Tailwind CSS를 사용합니다.
HTML 코드
<div class="max-w-4xl mx-auto p-6">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Our Journey</h2>
<div class="border-l-2 border-gray-300 dark:border-gray-600">
<div class="flex flex-start mb-4">
<div class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full" />
</div>
<div class="ml-4 flex flex-col justify-center">
<div class="text-xs text-gray-500 dark:text-gray-400">2023-01-01</div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Launched our first product</h3>
<p class="text-gray-600 dark:text-gray-400">We successfully launched our first product to the market, marking a significant milestone for our company.</p>
</div>
</div>
<div class="flex flex-start mb-4">
<div class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="rounded-full" />
</div>
<div class="ml-4 flex flex-col justify-center">
<div class="text-xs text-gray-500 dark:text-gray-400">2023-06-15</div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Expanded our services</h3>
<p class="text-gray-600 dark:text-gray-400">We expanded our service offerings to better meet the needs of our clients and enhance our market presence.</p>
</div>
</div>
<div class="flex flex-start mb-4">
<div class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center shadow-lg">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full" />
</div>
<div class="ml-4 flex flex-col justify-center">
<div class="text-xs text-gray-500 dark:text-gray-400">2023-12-01</div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Achieved 1000 clients</h3>
<p class="text-gray-600 dark:text-gray-400">We reached a significant achievement of acquiring our 1000th client, showcasing our growth and success.</p>
</div>
</div>
</div>
</div>