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

241

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

Author:
Brandon D

2 years ago

15.8k
Hero

Author:
Aman kumar

10 months ago

4.5k
Hero Section
Home hero section search bar

Author:
Samuel Abera

9 months ago

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

Author:
Amit Pachange

7 months ago

7.4k
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

Author:
Sahil Sasapara

6 months ago

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

Author:
Samuel Abera

6 months ago

4.3k
Hero Beer

Author:
Samuel Abera

6 months ago

2.7k
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

5 months ago

894
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.

Author:
Coastal UI

2 months ago

483
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.

Author:
Coastal UI

2 months ago

440
Portfolio Hero Section 4

Author:
Samuel Abera

4 weeks ago

775
Info Card

Author:
Prem..

2 years ago

16.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components