Home
Coastal UI
Fully Animated Timeline Card

Fully Animated Timeline Card

It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

This tailwind example is contributed by Coastal UI, on 12-Nov-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Roadmap, Changelog,Front page

Card Hero Timeline Landing Page

Author Coastal UI

1.2k

Fork Fullscreen

<div class="bg-zinc-950 h-[400px] w-[850px] rounded-lg relative group flex flex-col p-4 overflow-hidden group">
                <div class="flex-grow w-full relative overflow-hidden z-0">
                    
                    <div class="absolute z-0 left-0 w-full h-full flex">
                        <div class="content-scroll absolute left-0 right-0">
                            
                            <div class="fixed left-6 w-[1px] h-[calc(100%-153px)] bg-zinc-600/40"></div>
                            
                            
                            <div class="pl-16">
                                
                                <div class="h-[304px] flex items-center justify-center">
                                    <div class="w-full mr-6 bg-[#070709] rounded-md border-zinc-600 border-opacity-40 border flex flex-col p-3 relative z-30 isolate">
                                        <div class="absolute -left-[44px] top-1/2 -translate-y-1/2 h-[1px] bg-zinc-600 w-[44px] opacity-70"></div>
                                        <div class="absolute -left-[45px] top-1/2 -translate-y-1/2 h-[10px] w-[10px] bg-purple-600 border-zinc-600 border rounded-full"></div>
                                        <div class="flex flex-col space-y-3">
                                            <div class="flex items-center justify-between">
                                                <div class="flex items-center space-x-3">
                                                    <div class="border border-zinc-600 border-opacity-40 w-12 h-12 rounded-md relative overflow-hidden">
                                                        <div class="absolute top-3/4 right-0 -translate-y-1/2 w-5 h-5 bg-purple-600 blur-[13px]"></div>
                                                        <svg class="p-[7px] isolate" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
                                                            <path fill="white" d="M20 19H2v-2h2V9H2V7h1V6h2V5h2V4h2V3h4v1h2v1h2v1h2v1h1v2h-2v8h2m-3-8V7h-2V6h-2V5H9v1H7v1H5v2m3 8v-6H6v6m6 0v-6h-2v6m6 0v-6h-2v6Z" />
                                                        </svg>
                                                    </div>
                                                    <div class="flex flex-col justify-start items-start">
                                                        <div class="text-zinc-100 font-medium">Fintech Security Suite</div>
                                                        <div class="text-zinc-400 text-sm">Completed September 2023 in three weeks.</div>
                                                    </div>
                                                </div>
                                                <div class="text-zinc-400 italic text-sm">Financial Services, Cybersecurity</div>
                                            </div>
                                            <div class="flex items-center space-x-2 border-l-2 border-purple-600/30 pl-3">
                                                <div class="text-purple-600 text-sm italic">"This suite revolutionized how we handle security. The ROI was evident within the first month."</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            
                                
                                <div class="h-[304px] flex items-center justify-center">
                                    <div class="w-full mr-6 bg-[#070709] rounded-md border-zinc-600 border-opacity-40 border flex flex-col p-3 relative z-30 isolate">
                                        <div class="absolute -left-[44px] top-1/2 -translate-y-1/2 h-[1px] bg-zinc-600 w-[44px] opacity-70"></div>
                                        <div class="absolute -left-[45px] top-1/2 -translate-y-1/2 h-[10px] w-[10px] bg-emerald-500 border-zinc-600 border rounded-full"></div>
                                        <div class="flex flex-col space-y-3">
                                            <div class="flex items-center justify-between">
                                                <div class="flex items-center space-x-3">
                                                    <div class="border border-zinc-600 border-opacity-40 w-12 h-12 rounded-md relative overflow-hidden">
                                                        <div class="absolute top-3/4 right-0 -translate-y-1/2 w-5 h-5 bg-emerald-600 blur-[13px]"></div>
                                                        <svg class="p-[7px] isolate" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                                            <path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m6.194 11.397l5.998-8.085c.47-.632 1.348-.239 1.348.603v6.258c0 .505.345.913.77.913h2.918c.663 0 1.016.927.578 1.518l-5.998 8.084c-.47.632-1.348.239-1.348-.603v-6.258c0-.505-.345-.913-.77-.913H6.771c-.663 0-1.016-.927-.578-1.517" color="white" />
                                                        </svg>
                                                    </div>
                                                    <div class="flex flex-col justify-start items-start">
                                                        <div class="text-zinc-100 font-medium">Sustainable Energy Monitoring</div>
                                                        <div class="text-zinc-400 text-sm">Completed November 2023 in two weeks.</div>
                                                    </div>
                                                </div>
                                                <div class="text-zinc-400 italic text-sm">CleanTech, IoT Solutions</div>
                                            </div>
                                            <div class="flex items-center space-x-2 border-l-2 border-emerald-600/30 pl-3">
                                                <div class="text-emerald-600 text-sm italic">"Implemented across 200 buildings, achieving 30% energy savings and 92% maintenance prediction accuracy."</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            
                                
                                <div class="h-[304px] flex items-center justify-center">
                                    <div class="w-full mr-6 bg-[#070709] rounded-md border-zinc-600 border-opacity-40 border flex flex-col p-3 relative z-30 isolate">
                                        <div class="absolute -left-[44px] top-1/2 -translate-y-1/2 h-[1px] bg-zinc-600 w-[44px] opacity-70"></div>
                                        <div class="absolute -left-[45px] top-1/2 -translate-y-1/2 h-[10px] w-[10px] bg-blue-600 border-zinc-600 border rounded-full"></div>
                                        <div class="flex flex-col space-y-3">
                                            <div class="flex items-center justify-between">
                                                <div class="flex items-center space-x-3">
                                                    <div class="border border-zinc-600 border-opacity-40 w-12 h-12 rounded-md relative overflow-hidden">
                                                        <div class="absolute top-3/4 right-0 -translate-y-1/2 w-5 h-5 bg-blue-600 blur-[13px]"></div>
                                                        <svg class="p-[5px] isolate" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
                                                            <g fill="white">
                                                                <path d="M22.5 20.5V17h2v3.5H28v2h-3.5V26h-2v-3.5H19v-2z" />
                                                                <path fill-rule="evenodd" d="M7.057 31.476A2 2 0 0 1 7 31V12a2 2 0 0 1 2-2h30a2 2 0 0 1 2 2v19c0 .244-.044.477-.123.693l3.111 4.76A1 1 0 0 1 43.151 38H4.8a1 1 0 0 1-.849-1.528zM9 12h30v19H9z" clip-rule="evenodd" />
                                                            </g>
                                                        </svg>
                                                    </div>
                                                    <div class="flex flex-col justify-start items-start">
                                                        <div class="text-zinc-100 font-medium">Healthcare Analytics Platform</div>
                                                        <div class="text-zinc-400 text-sm">Completed December 2023 in two weeks.</div>
                                                    </div>
                                                </div>
                                                <div class="text-zinc-400 italic text-sm">Medical Tech, B2B SaaS</div>
                                            </div>
                                            <div class="flex items-center space-x-2 border-l-2 border-blue-600/30 pl-3">
                                                <div class="text-blue-600 text-sm italic">"Processing 1M+ daily records with 45% faster diagnosis times and 98% accuracy in predictions."</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            
                                
                                <div class="h-[304px] flex items-center justify-center">
                                    <div class="w-full mr-6 bg-[#070709] rounded-md border-zinc-600 border-opacity-40 border flex flex-col p-3 relative z-30 isolate">
                                        <div class="absolute -left-[44px] top-1/2 -translate-y-1/2 h-[1px] bg-zinc-600 w-[44px] opacity-70"></div>
                                        <div class="absolute -left-[45px] top-1/2 -translate-y-1/2 h-[10px] w-[10px] bg-amber-500 border-zinc-600 border rounded-full"></div>
                                        <div class="flex flex-col space-y-3">
                                            <div class="flex items-center justify-between">
                                                <div class="flex items-center space-x-3">
                                                    <div class="border border-zinc-600 border-opacity-40 w-12 h-12 rounded-md relative overflow-hidden">
                                                        <div class="absolute top-3/4 right-0 -translate-y-1/2 w-5 h-5 bg-amber-600 blur-[13px]"></div>
                                                        <svg class="p-[7px] isolate" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
                                                            <g fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round">
                                                                <path d="M11.366 7.318a5.506 5.506 0 1 0-7.549 3.736M.512 6.006h11.011" />
                                                                <path d="M4.382 8.547a9.5 9.5 0 0 1-.484-2.541A9.5 9.5 0 0 1 6.016.5a9.5 9.5 0 0 1 2.117 5.506A10 10 0 0 1 8.02 7.06m1.438 1.118l4.03 1.746l-4.03 1.746L5.43 9.924l4.03-1.746Z" />
                                                                <path d="m7.257 10.72l.004 1.9s.665.88 2.197.88s2.2-.88 2.2-.88v-1.9m-6.229 2.275V9.924" />
                                                            </g>
                                                        </svg>
                                                    </div>
                                                    <div class="flex flex-col justify-start items-start">
                                                        <div class="text-zinc-100 font-medium">AI-Powered Education Platform</div>
                                                        <div class="text-zinc-400 text-sm">Completed January 2024 in two weeks.</div>
                                                    </div>
                                                </div>
                                                <div class="text-zinc-400 italic text-sm">EdTech, Machine Learning</div>
                                            </div>
                                            <div class="flex items-center space-x-2 border-l-2 border-amber-600/30 pl-3">
                                                <div class="text-amber-600 text-sm italic">"Serving 50,000+ students with AI-driven personalization, resulting in 45% increased engagement rates."</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="absolute left-0 right-0 top-0 h-12 bg-gradient-to-b from-zinc-950 to-transparent z-20"></div>
                    <div class="absolute left-0 right-0 bottom-0 h-12 bg-gradient-to-t from-zinc-950 to-transparent z-20"></div>
                </div>
                <div class="flex flex-col transition duration-700 mt-3">
                    <p class="text-2xl mb-2 text-white font-semibold">We Get It Done</p>
                    <p class="text-zinc-300">We are known for getting projects done fast. Most apps are built within 2 weeks.</p>
                </div>
            </div>
            
            <style>
                .content-scroll {
                    animation: scroll 20s ease-in-out infinite;
                }
             
                @keyframes scroll {
                    0%, 12% {
                        transform: translateY(0);
                    }
                    20%, 37% {
                        transform: translateY(-304px);
                    }
                    45%, 62% {
                        transform: translateY(-604px);
                    }
                    70%, 87% {
                        transform: translateY(-906px);
                    }
                    95%, 100% {
                        transform: translateY(0);
                    }
                }
             </style>

Related Examples