レトロなタイムライン
ポートフォリオ用に設計された、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>