Home
Kofi Osei
Coming soon page template

Coming soon page template

This tailwind example is contributed by Kofi Osei, on 13-Jan-2023. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are upcoming, Pre-launch page, Teaser page, Under construction page, Placeholder page, Sneak peek page,Launch page

Coming Soon Page

Author Kofi Osei

12k

Fork Fullscreen

<div class="bg-gray-100 dark:bg-gray-800 min-h-screen pt-20">
    <div class="max-w-4xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <h1 class="text-4xl font-extrabold text-gray-900 dark:text-white">Coming Soon</h1>
            <p class="mt-3 text-lg text-gray-500 dark:text-gray-300">Our website is under construction.</p>
        </div>
        <div class="mt-10">
            <form class="mx-auto max-w-xs">
                <div class="flex items-center border-b border-gray-500 dark:border-gray-300 py-2">
                    <input type="email"
                        class="appearance-none bg-transparent border-none w-full text-gray-700 dark:text-white mr-3 py-1 px-2 leading-tight focus:outline-none"
                        placeholder="Enter your email">
                    <button
                        class="flex-shrink-0 bg-cyan-500 hover:bg-cyan-700 border-cyan-500 hover:border-cyan-700 text-sm border-4 text-white py-1 px-2 rounded dark:bg-cyan-600 dark:hover:bg-cyan-800 dark:border-cyan-600"
                        type="submit">
                        Notify me
                    </button>
                </div>
            </form>
            <p class="mt-2 text-center text-gray-500 dark:text-gray-300 text-xs">
                We'll notify you when we launch.
            </p>
        </div>
    </div>
</div>

Related Examples