Coming Soon Page

This tailwind example is contributed by Conan Hilton, on 18-Sep-2022. Component is made with Tailwind v3.4. 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

Tailwind v3.4 10.6k 12

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

Samuel Dawson

3 years ago

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

Noob

3 years ago

11.3k
Simple coming soon page

Adia Okonkwo

3 years ago

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

Prajwal Hallale

3 years ago

8.2k
Minimal coming soon page

Freja Jensen

3 years ago

11.4k
Simple coming soon page

Freja Jensen

3 years ago

11.6k
Coming soon landing page template

Brandon D

3 years ago

11.5k
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.

Ayyamperumal S

1 year ago

1.7k
Responsive Projects Section

ariaw

1 year ago

1.4k
Profile Card
User Profile Card with Name and Location

Anubhav Ranjan

2 years ago

3.3k
Futuristic 3D Tilt Card
Hover to see the 3D effect

Quentin Rivers

1 year ago

3.7k
Personal Portfolio Website
Nziza HAMZY 😎! Reka dukore full TailwindCSS Portfolio yuzuye na: Hero Section About Section Projects Section (cards) Contact Form Animations & hover effects Fully responsive for mobile

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.5k