레트로 타임라인
포트폴리오를 위해 설계된 Tailwind CSS를 사용하는 간단한 레트로/빈티지 타임라인 구성 요소입니다. 반응형 레이아웃과 보색을 사용하는 어두운 모드 지원이 특징입니다.
HTML 코드
<div class="container mx-auto px-4 py-8">
<div class="flex flex-col md:flex-row">
<div class="md:w-1/2">
<div class="border-r-2 border-purple-500 dark:border-purple-700 pr-8">
<div class="mb-8 text-right">
<div class="text-sm text-gray-600 डार्क:text-gray-300">1985</div>
<h4 class="text-xl font-bold text-gray-800 dark:text-white">Started Coding</h4>
<p class="mt-2 text-gray-700 dark:text-gray-200">Learned my first programming language on a vintage computer.</p>
</div>
<div class="mb-8 text-right">
<div class="text-sm text-gray-600 dark:text-gray-300">1990</div>
<h4 class="text-xl font-bold text-gray-800 dark:text-white">First Website</h4>
<p class="mt-2 text-gray-700 dark:text-gray-200">Launched my first personal website, very Geocities-esque.</p>
</div>
</div>
</div>
<div class="md:w-1/2 mt-8 md:mt-0">
<div class="border-l-2 border-teal-500 dark:border-teal-700 प्ल-8">
<div class="mb-8">
<div class="text-sm text-gray-600 dark:text-gray-300">2000</div>
<h4 class="text-xl font-bold text-gray-800 dark:text-white">Went Pro</h4>
<p class="mt-2 text-gray-700 dark:text-gray-200">Started working as a professional web developer.</p>
</div>
<div class="mb-8">
<div class="text-sm text-gray-600 dark:text-gray-300">2020</div>
<h4 class="text-xl font-bold text-gray-800 dark:text-white">Modern Technologies</h4>
<p class="mt-2 text-gray-700 dark:text-gray-200">Embracing modern frameworks and design trends, still with a nod to the classics.</p>
</div>
</div>
</div>
</div>
</div>
관련 구성 요소
소셜 미디어 타임라인 구성 요소
소셜 미디어를 위한 간단하고 반응이 빠른 타임라인 구성 요소로, 머티리얼 디자인 원칙에 따라 설계되었습니다. 어스 톤을 사용하며 다크 모드 지원이 포함되어 있습니다. 각 타임라인 항목에는 사용자 아바타, 이름, 게시물 제목 및 자리 표시자 이미지가 표시되며, 이는 소셜 미디어 피드에 일반적입니다.