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

927

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

6 months ago

1.2k
Responsive Projects Section

Author:
ᴀʀ!ᴀ

2 months ago

458
Coming soon page

Author:
Samuel Dawson

2 years ago

17.8k
Moving Background Animation

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

5 months ago

2.1k
Maintenance page template
The site is under maintenance placeholder page

Author:
Anonymous

3 months ago

477
Coming soon page with working count down timer
Update the date according to your need

Author:
Prajwal Hallale

2 years ago

8k
car delivary
car delivary

Author:
bonheur dev

3 weeks ago

78
Simple coming soon page

Author:
Freja Jensen

2 years ago

10.1k
Responsive Projects Section

Author:
ᴀʀ!ᴀ

2 months ago

295
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

4 months ago

931
Maintenance page template
The site is under maintenance placeholder page

Author:
Anonymous

2 weeks ago

22
Typewriter animation effect
Build using only Tailwind CSS; no JavaScript is required. This is a continuous typing effect. If you want to stop it after the text is typed for the first time, then you can remove 'infinite' from [typing: 'typing 2s steps(20) infinite alternate, blink .7s infinite'] from the config file.

Author:
Samuel Dawson

1 year ago

19.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components