CCHub Logo CCHub Tailwind Collection
组件 时间线 Timeline 组件

Timeline 组件

一个简单的 retro/vintage 时间轴组件，旨在展示具有怀旧 80 年代/90 年代美感的作品或产品，使用类似的配色方案来支持深色模式。

预览

HTML 代码 

<div class="flex flex-col items-center p-4">
    <h2 class="text-2xl font-bold text-white mb-4 dark:text-gray-200">Portfolio Timeline</h2>
    <div class="flex flex-col space-y-8">
        <div class="flex flex-row items-start dark:bg-gray-800 bg-gray-200 rounded-lg shadow-md p-4 w-full max-w-lg">
            <div class="flex-shrink-0 mr-4">
                <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            </div>
            <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-300">Project Title 1</h3>
                <p class="text-gray-700 dark:text-gray-400">Brief description of the project, showcasing the main features and achievements.</p>
                <img src="https://picsum.photos/200/100?random=1" alt="Project Image" class="mt-2 rounded-md">
            </div>
        </div>
        <div class="flex flex-row items-start dark:bg-gray-800 bg-gray-200 rounded-lg shadow-md p-4 w-full max-w-lg">
            <div class="flex-shrink-0 mr-4">
                <img src="https://randomuser.me/api/portraits/thumb/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            </div>
            <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-300">Project Title 2</h3>
                <p class="text-gray-700 dark:text-gray-400">Brief description of the project, showcasing the main features and achievements.</p>
                <img src="https://picsum.photos/200/100?random=2" alt="Project Image" class="mt-2 rounded-md">
            </div>
        </div>
        <div class="flex flex-row items-start dark:bg-gray-800 bg-gray-200 rounded-lg shadow-md p-4 w-full max-w-lg">
            <div class="flex-shrink-0 mr-4">
                <img src="https://randomuser.me/api/portraits/thumb/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            </div>
            <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-300">Project Title 3</h3>
                <p class="text-gray-700 dark:text-gray-400">Brief description of the project, showcasing the main features and achievements.</p>
                <img src="https://picsum.photos/200/100?random=3" alt="Project Image" class="mt-2 rounded-md">
            </div>
        </div>
    </div>
</div>

相关组件

Neon_Glow_Timeline_Agriculture

一个复杂的响应式时间轴组件，具有霓虹灯/发光效果和宝石色调，专为农业/农业网站量身定制。具有丰富的视觉元素和深色模式支持。

打开

Cyberpunk_Timeline_Dating_Social_Component

一个响应式时间线组件，具有赛博朋克美学，适用于约会和社交平台。具有深色背景、温暖的霓虹灯装饰和适用于台式机、平板电脑和移动设备的自适应布局，并完全支持深色模式。

打开

Playful_Music_Timeline_Component

专为音乐和音频平台设计的有趣而有趣的时间轴组件，具有明亮的宝石色调、圆润的元素和支持深色模式的响应式布局。显示一段时间内的音频事件或轨道。

打开