组件 时间线 复古时间线

复古时间线

一个简单的复古/经典时间轴组件,使用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>

相关组件

类拟物时间轴组件

一个拟物化时间线组件,支持响应效果和深色主题,使用Tailwind CSS构建。无需JavaScript,仅需HTML和CSS。

打开

时间线组件

一个响应式时间轴组件,支持暗黑模式和微交互,使用Tailwind CSS。不需要JavaScript。

打开

时间轴组件

响应式时间线组件,具有拟物化设计、相似配色方案、中等复杂性,适用于支持深色主题的博客/内容网站。无需 JavaScript,使用支持深色模式的 Tailwind CSS。使用来自 picsum.photos 的图像和来自 randomuser.me 的头像。

打开