레트로 타임라인
포트폴리오를 위해 설계된 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>