Home
Odessa Young
Coming soon landing page

Coming soon landing page

This tailwind example is contributed by Odessa Young, on 23-Jan-2023. 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

Coming Soon Page

Author Odessa Young

11.5k

Fork Fullscreen

<section class="bg-white py-20">
        <div class="container mx-auto px-4">
            <div class="max-w-2xl mx-auto text-center">
                <h1 class="text-4xl font-bold mb-6">We're launching soon</h1>
                <p class="text-gray-600 mb-12">Enter your email to be the first to know when we launch.</p>
                <form class="max-w-md mx-auto">
                    <div class="flex items-center">
                        <input type="email" class="bg-gray-100 mr-3 py-2 px-4 w-full rounded-md focus:outline-none focus:bg-white" placeholder="Enter your email">
                        <button type="submit" class="bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50">Subscribe</button>
                    </div>
                </form>
            </div>
        </div>
    </section>

<section class="bg-gray-200 py-20">
        <div class="container mx-auto px-4">
            <div class="max-w-2xl mx-auto text-center">
                <h2 class="text-3xl font-bold mb-6">What to expect</h2>
                <p class="text-gray-600 mb-12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec orci
                    quis justo aliquam euismod eget a leo. Sed eget orci feugiat, porttitor nibh vel, faucibus mauris.
                </p>
            </div>
            <div class="flex flex-wrap -mx-4 mt-12">
                <div class="w-full md:w-1/3 px-4 mb-8">
                    <div class="rounded-md bg-white shadow-md p-8">
                        <div class="text-4xl font-bold text-purple-600 mb-4">01</div>
                        <h3 class="text-2xl font-bold mb-4">Feature 1</h3>
                        <p class="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec
                            orci quis justo aliquam euismod eget a leo.</p>
                    </div>
                </div>
                <div class="w-full md:w-1/3 px-4 mb-8">
                    <div class="rounded-md bg-white shadow-md p-8">
                        <div class="text-4xl font-bold text-purple-600 mb-4">02</div>
                        <h3 class="text-2xl font-bold mb-4">Feature 2</h3>
                        <p class="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec
                            orci quis justo aliquam euismod eget a leo.</p>
                    </div>
                </div>

<div class="w-full md:w-1/3 px-4 mb-8">
                    <div class="rounded-md bg-white shadow-md p-8">
                        <div class="text-4xl font-bold text-purple-600 mb-4">03</div>
                        <h3 class="text-2xl font-bold mb-4">Feature 3</h3>
                        <p class="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec
                            orci quis justo aliquam euismod eget a leo.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

Related Examples

Coming soon page

Author:
Samuel Dawson

3 years ago

18.7k
Coming soon page with newsletter

Author:
Samuel Dawson

3 years ago

11.1k
Coming soon page with countdown

Author:
Samuel Dawson

3 years ago

14.6k
Maintenance page template
The site is under maintenance placeholder page

Author:
Noah Schmidt

2 years ago

14.7k
Minimal coming soon page
Temporary placeholder for website landing page

Author:
Freja Jensen

2 years ago

12.7k
Simple coming soon page
with background-image

Author:
TailwindFlex

2 years ago

13.8k
"Coming Soon" landing page component

Author:
Anonymous

2 years ago

10.8k
bears/beats/battlestar gallactica
bears beats battlestar gallactica

Author:
Anonymous

2 years ago

9.7k
Simple coming soon page

Author:
Adia Okonkwo

2 years ago

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

Author:
Prajwal Hallale

2 years ago

8.1k
Coming soon landing page template

Author:
Brandon D

3 years ago

10.9k
Rwandan farmers with Canadian markets through sustainable, fair trade practices.
Key Features of This Website: Professional Design: Clean, modern interface with orange/green color scheme representing mangoes and agriculture Fully responsive layout that works on all devices Comprehensive Sections: Hero section highlighting the Rwanda-Canada mango trade Product showcase with different mango varieties Current market pricing table Detailed farm-to-table process explanation Company information and impact metrics Testimonials from partners Contact form and information Trade-Specific Content: Focus on Rwandan mango varieties suitable for Canadian markets Pricing in both USD and kg units common in agricultural trade Information about certifications and compliance Shipping and logistics details User Experience: Clear calls-to-action for quotes and orders Easy navigation between sections Newsletter signup for market updates Contact information prominently displayed Trust Elements: Certifications and compliance badges Impact statistics showing benefits to Rwandan farmers Testimonials from Canadian partners

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components