Home
Samuel Dawson
Coming soon page with countdown

Coming soon page with countdown

This tailwind example is contributed by Samuel Dawson, on 27-Dec-2022. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are upcoming, Pre-launch page, Teaser page, Under construction page, Placeholder page, Sneak peek page,Launch page

Coming Soon Page

Author Samuel Dawson

12.9k

7

Fork Fullscreen

<div class="relative h-screen w-full flex flex-col items-center justify-center text-center text-white bg-cover bg-center"
    style="background-image:url(https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2850&amp;q=80);">
    <div class="absolute top-0 right-0 bottom-0 left-0 bg-gray-900 opacity-90"></div>

<div class="z-10 text-sm">
        WE ARE COMING SOON!
    </div>

<div class="flex items-end justify-center z-10">
        <div class="m-2 sm:m-5">
            <span class="text-indigo-600 font-bold text-xl sm:text-5xl">110</span>
            <p>Days</p>
        </div>
        <div class="m-2 sm:m-5">
            <span class="text-indigo-600 font-bold text-xl sm:text-5xl">13</span>
            <p>Hours</p>
        </div>
        <div class="m-2 sm:m-5">
            <span class="text-indigo-600 font-bold text-xl sm:text-5xl">47</span>
            <p>Minutes</p>
        </div>
        <div class="m-2 sm:m-5">
            <span class="text-indigo-600 font-bold text-xl sm:text-5xl">20</span>
            <p>Seconds</p>
        </div>
    </div>

<div class="rounded-md shadow z-10 mt-5">
        <a href="#"
            class="w-full px-8 py-3 border border-transparent text-base leading-6 font-light rounded-full text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo transition duration-150 ease-in-out md:py-4 md:text-md md:px-16">
            <span>Who We Are?</span>
        </a>
    </div>

</div>

Related Examples

Coming soon page

Author:
Samuel Dawson

1 year ago

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

Author:
Prajwal Hallale

1 year ago

7.8k
Coming soon landing page template

Author:
Brandon D

1 year ago

9.5k
Coming soon page with newsletter

Author:
Samuel Dawson

1 year ago

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

Author:
TailwindFlex

1 year ago

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

Author:
Noah Schmidt

1 year ago

11k
Simple coming soon page
with background-image

Author:
TailwindFlex

1 year ago

11.8k
Coming soon landing page

Author:
Odessa Young

1 year ago

9.8k
"Coming Soon" landing page with countdown timer

Author:
Prajwal Hallale

1 year ago

6.1k
Simple coming soon page

Author:
Adia Okonkwo

1 year ago

16.7k
"Coming Soon" landing page component

Author:
Anonymous

1 year ago

8.4k
Simple coming soon page

Author:
Freja Jensen

1 year ago

9.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components

© 2024 TailwindFlex. All Rights Reserved.

v1.8