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

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

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

Author:
Noob

2 years ago

10.1k
Simple coming soon page

Author:
Adia Okonkwo

2 years ago

19.5k
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.3k
Minimal coming soon page

Author:
Freja Jensen

2 years ago

10.3k
Coming soon landing page template

Author:
Brandon D

2 years ago

10.8k
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

5 months ago

824
Dynamic Google Card

Author:
Cristian

6 months ago

793
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Author:
Hamza Atig

4 months ago

738
Responsive Features Section

Author:
ᴀʀ!ᴀ

4 months ago

651
Card
Jobs recommended for you LinkedIn Clone

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

4 months ago

658

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components