Home
Conan Hilton
Coming Soon Page

Coming Soon Page

This tailwind example is contributed by Conan Hilton, on 18-Sep-2022. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are upcoming, Pre-launch page, Teaser page, Under construction page, Placeholder page, Sneak peek page,Launch page

Card Coming Soon Page

Author Conan Hilton

9.7k

Fork Fullscreen

<div class="flex flex-col h-screen bg-center bg-cover bg-no-repeat bg-gray-100">
    <div
        class="grid place-items-center w-4/5 mx-auto p-10 my-20 sm:my-auto bg-white-600 border-4 border-indigo-600 bg-opacity-70 rounded-xl shadow-2xl space-y-5 text-center cursor-pointer">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
            class="h-24 w-24 text-indigo-600" viewBox="0 0 16 16">
            <path
                d="M4.968 9.75a.5.5 0 1 0-.866.5A4.498 4.498 0 0 0 8 12.5a4.5 4.5 0 0 0 3.898-2.25.5.5 0 1 0-.866-.5A3.498 3.498 0 0 1 8 11.5a3.498 3.498 0 0 1-3.032-1.75zM7 5.116V5a1 1 0 0 0-1-1H3.28a1 1 0 0 0-.97 1.243l.311 1.242A2 2 0 0 0 4.561 8H5a2 2 0 0 0 1.994-1.839A2.99 2.99 0 0 1 8 6c.393 0 .74.064 1.006.161A2 2 0 0 0 11 8h.438a2 2 0 0 0 1.94-1.515l.311-1.242A1 1 0 0 0 12.72 4H10a1 1 0 0 0-1 1v.116A4.22 4.22 0 0 0 8 5c-.35 0-.69.04-1 .116z">
            </path>
            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-1 0A7 7 0 1 0 1 8a7 7 0 0 0 14 0z"></path>
        </svg>
        <h1 class="text-4xl font-bold uppercase text-indigo-600 transition duration-500">Coming Soon</h1>
        <h2 class="text-xl text-gray-700 transition duration-500">
            We are almost there to introduce our new website to the world, in the meantime, you can follow us on social
            networks to get the latest updates.
        </h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <a href="https://www.facebook.com/" title="Quicktoolz On Facebook"
                class="md:w-32 tracking-wide font-bold rounded border-2 border-indigo-500 hover:text-white hover:border-blue-600 hover:bg-blue-600 shadow-md py-2 px-6 inline-flex items-center transition duration-500">
                <span class="mx-auto">Facebook</span>
            </a>
            <a href="https://twitter.com" title="Quicktoolz On Twitter"
                class="md:w-32 tracking-wide font-bold rounded border-2 border-indigo-500 hover:text-white hover:border-blue-500 hover:bg-blue-500 shadow-md py-2 px-6 inline-flex items-center transition duration-500">
                <span class="mx-auto">Twitter</span>
            </a>
            <a href="https://pinterest.com/" title="Quicktoolz On Pinterest"
                class="md:w-32 tracking-wide font-bold rounded border-2 border-indigo-500 hover:text-white hover:border-red-600 hover:bg-red-600 shadow-md py-2 px-6 inline-flex items-center transition duration-500">
                <span class="mx-auto">Pintrest</span>
            </a>
            <a href="https://www.reddit.com/" title="Quicktoolz On Facebook"
                class="md:w-32 tracking-wide font-bold rounded border-2 border-indigo-500 hover:text-white hover:border-yellow-600 hover:bg-yellow-600 shadow-md py-2 px-6 inline-flex items-center transition duration-500">
                <span class="mx-auto">Reddit</span>
            </a>
        </div>
    </div>
</div>

Related Examples

Coming soon page

Author:
Samuel Dawson

2 years ago

18k
Coming Soon Section
Simple and beautiful card for your showing on your projects (in development) home screen

Author:
Noob

2 years ago

10k
Simple coming soon page

Author:
Adia Okonkwo

2 years ago

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

Author:
Prajwal Hallale

2 years ago

8.1k
Simple coming soon page

Author:
Freja Jensen

2 years ago

10.1k
Minimal coming soon page

Author:
Freja Jensen

2 years ago

10.3k
Coming soon landing page template

Author:
Brandon D

2 years ago

10.6k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

4 months ago

652
beautifull feature section
We create a Advance animated feature section using tailwindcss and custom css

Author:
Akram Khan

1 year ago

2.2k
dismissible cookie banner with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.3k
Chat Bot

Author:
Md. Tofayel islam

1 week ago

89
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

3 months ago

606

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components