Home
$@(\/)(\/)Y
Animated Coming Soon 4

Animated Coming Soon 4

This tailwind example is contributed by $@(\/)(\/)Y, on 09-Jan-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Transitions,upcoming, Pre-launch page, Teaser page, Under construction page, Placeholder page, Sneak peek page,Launch page

Animation Coming Soon Page

$$@(\/)(\/)Y profile image$

Author $@(\/)(\/)Y

1.3k

Fork Fullscreen

<div
    class="h-screen w-full relative overflow-hidden bg-no-repeat bg-cover bg-[url('https://images.unsplash.com/photo-1634976276568-9ea10353a8cd?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxNHx8Z3JlZW4lMjBiYWNrZ3JvdW5kfGVufDB8MHx8fDE3MzY0ODk2NTR8MA&ixlib=rb-4.0.3&q=80&w=1080')]">
    <div
        class="h-full w-full animate-[bounce_4s_infinite] relative z-10 flex justify-center items-center bg-gray-900 dark:bg-white">
        <div
            class="absolute top-[20%] animate-[spin_6s_infinite] h-[10rem] w-[10rem] rounded-full border-t-8 border-b-8 border-dashed border-red-500 ">
        </div>
        <div
            class="absolute top-[21%] animate-[spin_6s_infinite] h-[9rem] w-[9rem] rounded-full border-t-4 border-b-4 border-purple-500 ">
        </div>
        <div
            class="absolute top-[22%] animate-[spin_6s_infinite] h-[8rem] w-[8rem] rounded-full border-t-4 border-b-4 border-pink-500 ">
        </div>
        <div
            class="absolute top-[23%] animate-[spin_6s_infinite] h-[7rem] w-[7rem] rounded-full border-t-4 border-b-4 border-yellow-500">
        </div>
        <div class="absolute top-[25%] h-[5rem] w-[5rem] rounded-full bg-green-400/40"></div>
        
        <div
            class="absolute top-[19%] h-[82%] w-[10rem] border-t-8 border-b-8 border-l-4 border-r-4 border-dashed border-green-600 rounded-full">
            <div
                class="absolute bottom-0 animate-[spin_6s_infinite] flex items-center justify-center border-8 border-dashed border-green-500 h-[10rem] w-full rounded-full text-white">
                <div class="bg-green-400/50 w-full h-full rounded-full"></div>
            </div>
        </div>
    </div>
    
    <div class="absolute bottom-4 w-full">
        <p
            class="text-5xl sm:text-7xl xl:text-8xl text-center uppercase font-serif font-bold text-transparent bg-[url('https://images.unsplash.com/photo-1605707159327-f43132f89a5e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80')] bg-contain bg-clip-text animate-textAnime">
            Coming Soon</p>
    </div>
</div>

Related Examples

Animated Coming Soon Page 3

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

9 months ago

1.4k
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Author:
Amit Pachange

1 year ago

4.5k
car delivary
it is used especially in e-commerce when you you are going to deliver

Author:
Bonimater

3 months ago

520
HOT DOGS WEB SITE
it combine the hot dogs delivary

Author:
bonheur dev

3 months ago

310
Creative Hero Section

Author:
Ijila Itunu

4 months ago

779
Coming Soon Page
Modern , gradient coming soon page

Author:
Rajesh Maheshwari

6 months ago

1.3k
404 Page Not Found

Author:
KULDEEP

2 months ago

503
Plug and Play Animated Button for Hero Statements / Landing Pages
REMOVE the bg-black from the outside <button/> div, if you are already using a black background. Besides this, the button is plug and play! Know errors: You may need to remove animate-spin for your usecase, depending on framework rendering. For SvelteKit, animate-spin is NOT needed. But the [animation:spin_4s]... is always necessary for a smooth effect. Check out my profile to join my community online or add me on LinkedIn.

Author:
Coastal UI

10 months ago

1.7k
E-Commerce Delivery Truck Animation
This responsive CSS animation showcases a delivery bus transporting a package to its destination, created entirely with Tailwind CSS and pure HTML. The animation features

Author:
Bonimater

3 months ago

594
Simple Btn animation

Author:
Ranit Saha

8 months ago

1.5k
Coming Soon

Author:
ΣYDRISS

4 weeks ago

127
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

626

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components