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

Animated Coming Soon 4

This tailwind example is contributed by $@(\/)(\/)¥, 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

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

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

1.5k

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

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

11 months ago

1.5k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

3 weeks ago

433
Ripple Animation

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

7 months ago

1.7k
Fireflies
Fireflies in the night sky. Based on anonymous/background-animation-2

Author:
Nick Girga

6 months ago

643
3D Box

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

1 year ago

5.5k
Animated Coming Soon Page 2
Animated Coming soon Page

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

1 year ago

3.4k
Responsive Cards with Hover Text Reveal Animation - Built with Tailwind CSS
nhance your website with these sleek, responsive cards designed using Tailwind CSS! Featuring a stylish hover animation, the text smoothly reveals when you hover over the card, adding a dynamic touch to your user interface. Perfect for portfolios, team profiles, or project showcases, this design adapts seamlessly to all screen sizes.

Author:
Abdul Baset Bappy

7 months ago

1.3k
Simple Btn animation

Author:
Ranit Saha

10 months ago

1.7k
Rwandan farmers with Canadian markets through sustainable, fair trade practices.
Key Features of This Website: Professional Design: Clean, modern interface with orange/green color scheme representing mangoes and agriculture Fully responsive layout that works on all devices Comprehensive Sections: Hero section highlighting the Rwanda-Canada mango trade Product showcase with different mango varieties Current market pricing table Detailed farm-to-table process explanation Company information and impact metrics Testimonials from partners Contact form and information Trade-Specific Content: Focus on Rwandan mango varieties suitable for Canadian markets Pricing in both USD and kg units common in agricultural trade Information about certifications and compliance Shipping and logistics details User Experience: Clear calls-to-action for quotes and orders Easy navigation between sections Newsletter signup for market updates Contact information prominently displayed Trust Elements: Certifications and compliance badges Impact statistics showing benefits to Rwandan farmers Testimonials from Canadian partners

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

778
Animated Gradient Background
animates a gradient background with vibrant colors. Slowly changes colors.

Author:
Anonymous

1 year ago

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

Author:
Anonymous

1 year ago

9.9k
background animation
background animation

Author:
Anonymous

2 years ago

49.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components