Coming soon page with countdown

This tailwind example is contributed by Samuel Dawson, on 27-Dec-2022. Component is made with Tailwind v3.4. 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

Tailwind v3.4 15.3k 12

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

Samuel Dawson

3 years ago

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

Prajwal Hallale

3 years ago

8.2k
Coming soon landing page template

Brandon D

3 years ago

11.5k
Coming soon page with newsletter

Samuel Dawson

3 years ago

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

TailwindFlex

3 years ago

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

Noah Schmidt

3 years ago

16.2k
Simple coming soon page
with background-image

TailwindFlex

3 years ago

14.9k
Coming soon landing page

Odessa Young

3 years ago

12.1k
"Coming Soon" landing page with countdown timer

Prajwal Hallale

3 years ago

6.5k
Simple coming soon page

Adia Okonkwo

3 years ago

21.1k
"Coming Soon" landing page component

Anonymous

3 years ago

11.5k
Simple coming soon page

Freja Jensen

3 years ago

11.6k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.