In this Tailwind CSS snippets we will see CTA(call-to-action) section example.
Example 1
Simple responsive CTA section.
<!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 CTA Section Example</title>
<link
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="mt-4"></div>
<section class="container mx-auto bg-gray-800">
<div class="px-8 py-20 lg:flex lg:justify-between">
<div class="">
<h3 class="text-3xl font-bold text-gray-100">
Tailwind CSS CTA Section
</h3>
<p class="mt-2 text-gray-100 text-md">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem
repellat sequi ex necessitatibus assumenda quasi, quos modi ducimus,
quod, vitae possimus?
</p>
</div>
<a
class="block px-8 py-2 mt-6 text-lg font-medium text-center text-white bg-indigo-800 rounded "
href="#"
>Get In Touch</a
>
</div>
</section>
</body>
</html>
Example 2
Tailwind CSS Centered CTA section.
<!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 CTA Section In Center</title>
<link
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="mt-4"></div>
<section class="container mx-auto bg-gray-800">
<div class="px-8 py-20 lg:flex lg:justify-center">
<div class="">
<h3 class="text-3xl font-bold text-center text-gray-100">
Tailwind CSS CTA Section
</h3>
<p class="mt-2 text-gray-100 text-md">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem
repellat sequi ex necessitatibus assumenda quasi, quos modi ducimus,
quod, vitae possimus?
</p>
<div class="items-center justify-center mt-4 lg:flex lg:gap-2">
<a
class="
block
px-8
py-2
mt-6
text-lg
font-medium
text-center text-white
bg-indigo-600
rounded
md:mt-0
hover:bg-indigo-500
"
href="#"
>Create Free Account</a
>
<a
class="
block
px-8
py-2
mt-6
text-lg
font-medium
text-center text-gray-900
rounded
bg-gray-50
md:mt-0
"
href="#"
>Learn more</a
>
</div>
</div>
</div>
</section>
</body>
</html>
Example 3
Tailwind CSS Gradient CTA section.
<!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 Gradient CTA Section</title>
<link
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="mt-4"></div>
<section
class="container mx-auto bg-gradient-to-r from-green-400 to-blue-500"
>
<div class="px-8 py-20 lg:flex lg:justify-center">
<div class="">
<h3 class="text-3xl font-bold text-center text-gray-100">
Tailwind CSS CTA Section
</h3>
<p class="mt-2 text-gray-100 text-md">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem
repellat sequi ex necessitatibus assumenda quasi, quos modi ducimus,
quod, vitae possimus?
</p>
<div class="items-center justify-center mt-4 lg:flex">
<a
class="
block
px-8
py-2
mt-6
text-center text-gray-900
rounded
bg-gray-50
md:mt-0
"
href="#"
>Get Started</a
>
</div>
</div>
</div>
</section>
</body>
</html>