In this section we will create simple tailwind than you page template, tailwind thank you page card, tailwind thank you page design examples with Tailwind CSS.
Tool Use
Tailwind CSS 3.x
Heroicons icon
Example 1
tailwind simple thank you page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Thank You Page </title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex items-center justify-center h-screen">
<div>
<div class="flex flex-col items-center space-y-2">
<svg xmlns="http://www.w3.org/2000/svg" class="text-green-600 w-28 h-28" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<h1 class="text-4xl font-bold">Thank You !</h1>
<p>Thank you for your interest! Check your email for a link to the guide.</p>
<a
class="inline-flex items-center px-4 py-2 text-white bg-indigo-600 border border-indigo-600 rounded rounded-full hover:bg-indigo-700 focus:outline-none focus:ring">
<svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 mr-2" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M7 16l-4-4m0 0l4-4m-4 4h18" />
</svg>
<span class="text-sm font-medium">
Home
</span>
</a>
</div>
</div>
</div>
</body>
</html>
tailwind thank you page template
Example 2
tailwind thank you page design card with shadow and ring.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Thank You Page </title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex items-center justify-center h-screen">
<div class="p-4 rounded shadow-lg ring ring-indigo-600/50">
<div class="flex flex-col items-center space-y-2">
<svg xmlns="http://www.w3.org/2000/svg" class="text-green-600 w-28 h-28" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<h1 class="text-4xl font-bold">Thank You !</h1>
<p>Thank you for your interest! Check your email for a link to the guide.</p>
<a
class="inline-flex items-center px-4 py-2 text-white bg-indigo-600 border border-indigo-600 rounded rounded-full hover:bg-indigo-700 focus:outline-none focus:ring">
<svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 mr-2" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M7 16l-4-4m0 0l4-4m-4 4h18" />
</svg>
<span class="text-sm font-medium">
Home
</span>
</a>
</div>
</div>
</div>
</body>
</html>
tailwind thank you page design card with shadow and ring.
Example 3
tailwind gradient thank you page design.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Thank You Page Example</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex items-center justify-center h-screen">
<div class="p-1 rounded shadow-lg bg-gradient-to-r from-purple-500 via-green-500 to-blue-500">
<div class="flex flex-col items-center p-4 space-y-2 bg-white">
<svg xmlns="http://www.w3.org/2000/svg" class="text-green-600 w-28 h-28" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<h1 class="text-4xl font-bold font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-500">Thank You !</h1>
<p>Thank you for your interest! Check your email for a link to the guide.</p>
<a
class="inline-flex items-center px-4 py-2 text-white bg-indigo-600 border border-indigo-600 rounded rounded-full hover:bg-indigo-700 focus:outline-none focus:ring">
<svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 mr-2" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M7 16l-4-4m0 0l4-4m-4 4h18" />
</svg>
<span class="text-sm font-medium">
Home
</span>
</a>
</div>
</div>
</div>
</body>
</html>
tailwind gradient thank you page design.
Read Also
Tailwind CSS 3 FAQ Accordion UI Example
Tailwind CSS 3 Alert Message Example
Tailwind CSS 3 Avatars Example
Tailwind CSS 3 Breadcrumb Example
Tailwind CSS v3 Button Examples
Tailwind CSS Gradient Button Example
Tailwind CSS 3D Button Example
Tailwind CSS Loading Button Example
Tailwind CSS v3 Cards Examples
Tailwind CSS Checkbox Form Examples
Tailwind CSS Dropdowns (Menu) on Hover Example
Tailwind CSS Multiselect Dropdown Example
How to use dark mode toggle switch in Tailwind CSS 3
How to use @apply directive in Tailwind CSS
Tailwind CSS sticky header & fixed navbar example
Tailwind CSS Navbar UI Example
Tailwind CSS 3 Login Page UI Example
Tailwind CSS Login Modal Example
Tailwind CSS 3 Overlay Image Example
Tailwind CSS Thank You Page Example
Tailwind CSS Timeline UI Example
Tailwind CSS Responsive Footer Section Example
Tailwind CSS Background Image Header Example
