作品时间线 Tailwind网站组件

<section class="py-20 bg-gradient-to-br from-purple-100 to-pink-100">
            <div class="max-w-4xl mx-auto px-4">
                <h2 class="text-3xl font-bold text-center mb-16 text-purple-900">作品历程</h2>
                <div class="relative">
                    <div class="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-purple-300"></div>
                    <div class="space-y-12">
                        <div class="flex items-center">
                            <div class="flex-1 text-right pr-8">
                                <div class="bg-white rounded-lg p-6 shadow-lg">
                                    <h3 class="text-xl font-bold text-purple-800 mb-2">电商平台设计</h3>
                                    <p class="text-gray-600 mb-2">2024年3月</p>
                                    <p class="text-gray-700">完整的电商平台UI/UX设计，包含用户端和管理端</p>
                                </div>
                            </div>
                            <div class="w-4 h-4 bg-purple-600 rounded-full border-4 border-white shadow-lg relative z-10"></div>
                            <div class="flex-1 pl-8"></div>
                        </div>
                        <div class="flex items-center">
                            <div class="flex-1 pr-8"></div>
                            <div class="w-4 h-4 bg-purple-600 rounded-full border-4 border-white shadow-lg relative z-10"></div>
                            <div class="flex-1 text-left pl-8">
                                <div class="bg-white rounded-lg p-6 shadow-lg">
                                    <h3 class="text-xl font-bold text-purple-800 mb-2">品牌视觉系统</h3>
                                    <p class="text-gray-600 mb-2">2024年1月</p>
                                    <p class="text-gray-700">为科技公司设计完整的品牌视觉识别系统</p>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center">
                            <div class="flex-1 text-right pr-8">
                                <div class="bg-white rounded-lg p-6 shadow-lg">
                                    <h3 class="text-xl font-bold text-purple-800 mb-2">移动应用界面</h3>
                                    <p class="text-gray-600 mb-2">2023年11月</p>
                                    <p class="text-gray-700">健康管理应用的完整UI设计和交互原型</p>
                                </div>
                            </div>
                            <div class="w-4 h-4 bg-purple-600 rounded-full border-4 border-white shadow-lg relative z-10"></div>
                            <div class="flex-1 pl-8"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>