Coming Soon Section

Simple and beautiful card for your showing on your projects (in development) home screen

This tailwind example is contributed by Noob, on 29-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 Noob

Tailwind v3.4 11.6k 14

Fork Fullscreen

<div class="flex items-center justify-center h-screen bg-gray-200">
    <div class="container">
        <div class="bg-white rounded-lg shadow-lg p-5 md:p-20 mx-2">
            <div class="text-center">
                <h2
                    class="text-4xl tracking-tight leading-10 font-extrabold text-gray-900 sm:text-5xl sm:leading-none md:text-6xl">
                    Quick<span class="text-indigo-600">Toolz</span>
                </h2>
                <h3 class='text-xl md:text-3xl mt-10'>Coming Soon</h3>
                <p class="text-md md:text-xl mt-10"><a class="hover:underline" href="#">Quicktoolz</a> is a website help
                    you provide simple
                    productivity tools for your daily need online for free.</p>
            </div>
            <div class="flex flex-wrap mt-10 justify-center">
                <div class="m-3">
                    <a href="#" title="Quicktoolz On Facebook"
                        class="md:w-32 bg-white tracking-wide text-gray-800 font-bold rounded border-2 border-blue-600 hover:border-blue-600 hover:bg-blue-600 hover:text-white shadow-md py-2 px-6 inline-flex items-center">
                        <span class="mx-auto">Facebook</span>
                    </a>
                </div>
                <div class="m-3">
                    <a href="#" title="Quicktoolz On Twitter"
                        class="md:w-32 bg-white tracking-wide text-gray-800 font-bold rounded border-2 border-blue-500 hover:border-blue-500 hover:bg-blue-500 hover:text-white shadow-md py-2 px-6 inline-flex items-center">
                        <span class="mx-auto">Twitter</span>
                    </a>
                </div>
                <div class="m-3">
                    <a href="#" title="Quicktoolz On Pinterest"
                        class="md:w-32 bg-white tracking-wide text-gray-800 font-bold rounded border-2 border-red-600 hover:border-red-600 hover:bg-red-600 hover:text-white shadow-md py-2 px-6 inline-flex items-center">
                        <span class="mx-auto">Pintrest</span>
                    </a>
                </div>
                <div class="m-3">
                    <a href="#" title="Quicktoolz On Facebook"
                        class="md:w-32 bg-white tracking-wide text-gray-800 font-bold rounded border-2 border-orange-500 hover:border-orange-500 hover:bg-orange-500 hover:text-white shadow-md py-2 px-6 inline-flex items-center">
                        <span class="mx-auto">Reddit</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

Coming Soon Page

Conan Hilton

4 years ago

10.6k
Coming soon page

Samuel Dawson

3 years ago

19.4k
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.8k
Card
amazing card

Cristian

2 years ago

2.6k
"Coming Soon" landing page component

Anonymous

3 years ago

11.7k
Hello Acode Master! 👋
is a passionate software developer based in Rubavu. He considers himself the top developer in the area and is committed to solving real-world problems through technology.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.3k
card appetizer
ss

Anonymous

2 years ago

2.2k
Product card

Oliver Hansen

3 years ago

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

Hamza Atig

1 year ago

1.7k
Créer une story
Créer une story

Omer fils ELENGA

10 months ago

1k
Portfolio with buttons
Portfolio with buttons. Portfolio item has image, title and description.

Mike Varen

2 years ago

4.8k
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

2.1k