Tailwind CSS CTA Section Example

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/[email protected]^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/[email protected]^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/[email protected]^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>