Home
Noob
Coming Soon Section

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 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 Noob

9.2k

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