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 v3.4. 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

Tailwind v3.4 2.8k 7

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

A Fullscreen Hero Section

Brandon D

4 years ago

23.3k
Hero

Aman kumar

2 years ago

7.7k
Hero Section
Home hero section search bar

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

8.5k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Amit Pachange

2 years ago

16k
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Sahil Sasapara

2 years ago

5.6k
Portfolio Hero Section 3
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

9.7k
Hero Beer

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

5.5k
beautifull portfolio page
I create a portfolio page

Akram Khan

2 years ago

3k
Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Coastal UI

1 year ago

2.7k
Website Mockup
An Onyx Component. This can be used for landing pages / other website mockup purposes. It's clean design will fit with most SAAS projects.

Coastal UI

1 year ago

2.4k
Portfolio Hero Section 4

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

4.8k
Single Page Portfolio

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

3.2k