Sections
Tailwind CSS Coming Soon Pages - Madhuranjan UI
Discover a range of Coming Soon page designs that build anticipation for your next big launch. Each template is designed to capture attention and keep your audience engaged while you prepare for the big reveal.
Simple Coming Soon Page
A clean and minimal design that announces your upcoming launch with clarity.
We’re Almost Ready!
Our website is coming soon. Sign up below to get notified when we launch.
04
Days
12
Hours
47
Min
08
Sec
1<div class="relative flex min-h-screen w-full items-center justify-center overflow-x-hidden bg-gray-50 font-sans antialiased dark:bg-gray-900">
2 <!-- Decorative Gradients -->
3 <div class="pointer-events-none absolute -top-32 -left-32 h-80 w-80 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 opacity-30 blur-3xl dark:from-purple-800 dark:to-pink-800"></div>
4 <div class="pointer-events-none absolute -right-32 bottom-0 h-80 w-80 rounded-full bg-gradient-to-br from-pink-400 to-yellow-400 opacity-20 blur-2xl dark:from-pink-700 dark:to-yellow-700"></div>
5
6 <!-- Main Content -->
7 <div class="relative z-10 max-w-xl px-6 text-center sm:px-8">
8 <svg class="mx-auto mb-8 h-20 w-20 text-purple-500 opacity-90 dark:text-purple-300" fill="currentColor" viewBox="0 0 24 24">
9 <path
10 d="M12 2c-5.534 0-10 4.476-10 10 0 3.243 1.568 6.12 4 Something Amazing is Coming
An engaging layout to create buzz and excitement about your upcoming product or event.
1<div class="flex min-h-screen flex-col items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 px-6 py-12 sm:px-12 dark:from-gray-900 dark:to-gray-800">
2 <div class="absolute inset-0 overflow-hidden">
3 <div class="absolute -top-20 -left-20 h-64 w-64 rounded-full bg-blue-200/30 blur-3xl dark:bg-blue-900/20"></div>
4 <div class="absolute -right-20 bottom-0 h-72 w-72 rounded-full bg-purple-200/30 blur-3xl dark:bg-purple-900/20"></div>
5 </div>
6
7 <div class="relative z-10 w-full max-w-4xl text-center">
8 <h1 class="flex flex-wrap gap-2 p-2 text-5xl font-bold tracking-tight text-gray-900 sm:text-5xl md:text-6xl dark:text-white">
9 <span class="block">Something</span>
10 <span class="block bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent dark:from-indigo-400 dark:to-purple-400">Amazing</span>Coming Soon With SVG Icon
Enhance your announcement with a vibrant SVG icon that adds a dynamic visual element.
Keep calm, we’re working our magic!
Coming Soon
Our team is putting the final touches on something awesome. Sign up below to stay in the loop.
10
Days
04
Hours
39
Min
27
Sec
1<div class="flex w-full overflow-hidden bg-gradient-to-tr from-blue-50 to-sky-100 font-sans text-gray-800 dark:from-gray-800 dark:to-slate-900 dark:text-gray-100">
2 <!-- Left Content / Illustration -->
3 <div class="hidden w-1/2 flex-col items-center justify-center p-10 sm:flex">
4 <!-- Replace this SVG placeholder with any illustration or image you prefer -->
5 <svg class="max-h-96 w-auto text-sky-400 opacity-90 dark:text-sky-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6 <path
7 stroke-linecap="round"
8 stroke-linejoin="round"
9 stroke-width="2"
10 d="M12 Launching Soon
Build anticipation with a dynamic page design that highlights your upcoming launch.
1<div class="relative overflow-hidden bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-gray-900 dark:to-gray-800">
2 <!-- Background elements -->
3 <div class="absolute inset-0 overflow-hidden opacity-50">
4 <div class="absolute top-1/4 left-20 h-32 w-32 rounded-full bg-indigo-200 blur-xl dark:bg-indigo-900/50"></div>
5 <div class="absolute top-1/3 right-32 h-40 w-40 rounded-full bg-purple-200 blur-xl dark:bg-purple-900/50"></div>
6 <div class="absolute bottom-1/4 left-1/3 h-28 w-28 rounded-full bg-pink-200 blur-xl dark:bg-pink-900/50"></div>
7 </div>
8
9 <!-- Main content -->
10 <div class="relative mx-auto flex max-w-4xl flex-col items-center justify-center px-6 py-10 sm:px-8">