时间轴组件
响应式时间线组件，具有拟物化设计、相似配色方案、中等复杂性，适用于支持深色主题的博客/内容网站。无需 JavaScript，使用支持深色模式的 Tailwind CSS。使用来自 picsum.photos 的图像和来自 randomuser.me 的头像。
HTML 代码
<section class="relative antialiased bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
<div class="container mx-auto px-4 py-8 relative">
<div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-6">
<div class="flex flex-col md:flex-row -mx-6">
<div class="md:flex-shrink-0 w-full md:w-1/3 px-6 mb-6 md:mb-0">
<div class="relative">
<img src="https://picsum.photos/400/300?random=1" alt="Timeline Image" class="w-full rounded-lg shadow-md">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent opacity-75 rounded-lg"></div>
<div class="absolute bottom-0 left-0 right-0 p-4 text-center text-white">
<h2 class="text-xl font-semibold">Timeline Title</h2>
<p class="text-sm">A brief description of this timeline event.</p>
</div>
</div>
</div>
<div class="md:flex-grow w-full md:w-2/3 px-6">
<h3 class="text-2xl font-bold mb-4">Event Title 1</h3>
<p class="text-gray-700 dark:text-gray-300 mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-purple-500">
<div>
<p class="font-semibold">John Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Posted on January 1, 2023</p>
</div>
</div>
<div class="border-l-4 border-purple-500 pl-4">
<p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-6 mt-8">
<div class="flex flex-col md:flex-row -mx-6">
<div class="md:flex-grow w-full md:w-2/3 px-6 order-2 md:order-1">
<h3 class="text-2xl font-bold mb-4">Event Title 2</h3>
<p class="text-gray-700 dark:text-gray-300 mb-6">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-green-500">
<div>
<p class="font-semibold">Jane Smith</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Posted on February 15, 2023</p>
</div>
</div>
<div class="border-l-4 border-green-500 pl-4">
<p class="text-gray-700 dark:text-gray-300">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="md:flex-shrink-0 w-full md:w-1/3 px-6 mb-6 md:mb-0 order-1 md:order-2">
<div class="relative">
<img src="https://picsum.photos/400/300?random=2" alt="Timeline Image" class="w-full rounded-lg shadow-md">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent opacity-75 rounded-lg"></div>
<div class="absolute bottom-0 left-0 right-0 p-4 text-center text-white">
<h2 class="text-xl font-semibold">Another Title</h2>
<p class="text-sm">Related image description.</p>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-6 mt-8">
<div class="flex flex-col md:flex-row -mx-6">
<div class="md:flex-shrink-0 w-full md:w-1/3 px-6 mb-6 md:mb-0">
<div class="relative">
<img src="https://picsum.photos/400/300?random=3" alt="Timeline Image" class="w-full rounded-lg shadow-md">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent opacity-75 rounded-lg"></div>
<div class="absolute bottom-0 left-0 right-0 p-4 text-center text-white">
<h2 class="text-xl font-semibold">Final Event</h2>
<p class="text-sm">Concluding event details.</p>
</div>
</div>
</div>
<div class="md:flex-grow w-full md:w-2/3 px-6">
<h3 class="text-2xl font-bold mb-4">Event Title 3</h3>
<p class="text-gray-700 dark:text-gray-300 mb-6">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-blue-500">
<div>
<p class="font-semibold">Peter Jones</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Posted on March 10, 2023</p>
</div>
</div>
<div class="border-l-4 border-blue-500 pl-4">
<p class="text-gray-700 dark:text-gray-300">Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</div>
</div>
</section>
相关组件
灰度社交媒体时间线
使用 Tailwind CSS 构建的响应式、暗模式就绪社交媒体时间线组件。它具有严格的灰度配色方案，以及带有用户头像、帖子内容（文本和图像）、参与度统计数据和作按钮的复杂明信片。专为社交网络界面而设计，每个帖子上都有多个互动元素。该设计支持深色背景以减少眼睛疲劳。不使用 JavaScript。
Brutalist_Sepia_Timeline_Documentation
用于文档或 Wiki 站点的复杂野兽派风格时间轴组件，具有棕褐色/棕色调和完全响应能力，并支持深色模式。采用高对比度和原始美学设计。