CCHub Logo CCHub Tailwind Collection
组件 时间线 玻璃容态时间轴组件

玻璃容态时间轴组件

响应式时间轴组件，具有 glassmorphism 样式和三色配色方案。它包括具有模糊效果的磨砂玻璃状半透明元素，适用于博客和内容消费，并支持深色模式。

预览

HTML 代码 

<div class="bg-gray-50 dark:bg-gray-900 flex justify-center py-10">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-xl w-full backdrop-blur-md bg-opacity-30 border border-gray-200 dark:border-gray-700">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6">Timeline</h2>
        <div class="relative mb-4">
            <div class="flex justify-between items-center mb-4">
                <div class="w-1/2 flex items-center">
                    <div class="h-8 w-8 rounded-full overflow-hidden shadow-lg">
                        <img src="https://picsum.photos/40/40" alt="" class="object-cover">
                    </div>
                    <div class="ml-4">
                        <p class="text-sm text-gray-600 dark:text-gray-400">Event 1</p>
                        <p class="text-xs text-gray-500 dark:text-gray-500">Date 1</p>
                    </div>
                </div>
                <div class="h-1 w-1 bg-gray-300 dark:bg-gray-700"></div>
                <div class="w-1/2 text-right">
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description of Event 1.</p>
                </div>
            </div>
        </div>
        <div class="relative mb-4">
            <div class="flex justify-between items-center mb-4">
                <div class="w-1/2 flex items-center">
                    <div class="h-8 w-8 rounded-full overflow-hidden shadow-lg">
                        <img src="https://picsum.photos/40/40" alt="" class="object-cover">
                    </div>
                    <div class="ml-4">
                        <p class="text-sm text-gray-600 dark:text-gray-400">Event 2</p>
                        <p class="text-xs text-gray-500 dark:text-gray-500">Date 2</p>
                    </div>
                </div>
                <div class="h-1 w-1 bg-gray-300 dark:bg-gray-700"></div>
                <div class="w-1/2 text-right">
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description of Event 2.</p>
                </div>
            </div>
        </div>
        <div class="relative mb-4">
            <div class="flex justify-between items-center mb-4">
                <div class="w-1/2 flex items-center">
                    <div class="h-8 w-8 rounded-full overflow-hidden shadow-lg">
                        <img src="https://picsum.photos/40/40" alt="" class="object-cover">
                    </div>
                    <div class="ml-4">
                        <p class="text-sm text-gray-600 dark:text-gray-400">Event 3</p>
                        <p class="text-xs text-gray-500 dark:text-gray-500">Date 3</p>
                    </div>
                </div>
                <div class="h-1 w-1 bg-gray-300 dark:bg-gray-700"></div>
                <div class="w-1/2 text-right">
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description of Event 3.</p>
                </div>
            </div>
        </div>
    </div>
</div>

相关组件

灰度社交媒体时间线

使用 Tailwind CSS 构建的响应式、暗模式就绪社交媒体时间线组件。它具有严格的灰度配色方案，以及带有用户头像、帖子内容（文本和图像）、参与度统计数据和作按钮的复杂明信片。专为社交网络界面而设计，每个帖子上都有多个互动元素。该设计支持深色背景以减少眼睛疲劳。不使用 JavaScript。

打开

时间线组件

一个极简的时间线组件，专为博客和内容使用而设计，具有使用 Tailwind CSS 的大地色调和深色模式支持。

打开

时间轴组件

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

打开