Components

Tailwind CSS Inline CTAs

Feel free to customize the colors, styles, backgrounds and content based on your specific needs and design preferences.

Input with subscribe

With simple heading the page asks users to add their email with subscribe button.

Ready to Superpower Your Ideas?

Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard.

Subscribe to Update 

 <div class="w-full grid gap-7">
      <div class="grid gap-3">
      <h2 class="text-center text-gray-900 text-3xl font-bold font-manrope leading-10">Ready to Superpower Your Ideas?</h2>
      <p class="xl:max-w-2xl w-auto mx-auto text-center text-gray-500 text-base font-normal leading-relaxed">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard.</p>
      </div>
      <div class="grid gap-2.5">
      <h2 class="text-center text-gray-500 text-sm font-semibold leading-snug">Subscribe to Update</h2>
      <div class="pl-7 pr-1.5 py-1.5 rounded-full border border-gray-300 justify-between items-center inline-flex">
      <input class="focus:outline-none text-black text-opacity-20 text-base font-normal leading-relaxed" placeholder="Enter email to Subscribe">
      <button class="px-5 py-3 bg-indigo-600 hover:bg-indigo-700 transition-all duration-500 rounded-full shadow-sm">
        <span class="px-2 text-white text-base font-semibold">Subscribe</span>
      </button>
      </div>
      </div>
      </div>

With buttons

Keep heading, description and other CTA buttons all placed centrally aligned.

Ready to Superpower Your Ideas?

Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard.

 <div class="lg:max-w-7xl w-full mx-auto grid gap-7">
      <div class="grid gap-3">
      <h2 class="text-center text-gray-900 text-3xl font-bold font-manrope leading-10">Ready to Superpower Your Ideas?</h2>
      <p class="xl:max-w-2xl w-auto mx-auto text-center text-gray-500 text-base font-normal leading-relaxed">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard.</p>
      </div>
      <div class="gap-5 flex flex-wrap justify-center">
      <button class="grow shrink basis-0 w-80 px-7 py-4 bg-indigo-50 hover:bg-indigo-100 transition-all duration-500 rounded-xl">
      <span class="px-2 text-indigo-600 text-xl font-semibold leading-relaxed">Dismiss</span>
      </button>
      <button class="grow shrink basis-0 w-80 px-7 py-4 bg-indigo-600 hover:bg-indigo-700 transition-all duration-500 rounded-xl">
      <span class="px-2 text-white text-xl font-semibold leading-relaxed">Subscribe</span>
      </button>
      </div>
      </div>

With gradient background

Most simplest section with CTA buttons with gradient background and heading.

Inline CTAs image

Ready to Superpower Your Ideas?

Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard.

<div class="lg:max-w-7xl w-full mx-auto items-center justify-center flex relative">
      <div class="w-full h-full absolute bg-cyan-700 bg-opacity-60 rounded-2xl"></div>
      <img src="https://pagedone.io/asset/uploads/1705400194.png" alt="Inline CTAs image" class="w-full h-96 rounded-2xl object-cover">
      <div class="absolute flex items-center justify-center px-12 ">
      <div class="grid lg:gap-7 gap-4">
      <div class="grid gap-3">
        <h2 class="text-center text-white text-3xl font-bold font-manrope leading-10">Ready to Superpower Your Ideas?</h2>
        <p class="xl:max-w-2xl w-auto mx-auto text-center text-white text-base font-normal leading-relaxed">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard.</p>
      </div>
      <div class="gap-5 flex flex-wrap justify-center">
        <button class="w-80 px-7 lg:py-4 py-2 bg-white hover:bg-gray-50 transition-all duration-500 rounded-full">
          <span class="px-2 text-indigo-600 text-xl font-semibold leading-relaxed">Dismiss</span>
        </button>
        <button class="w-80 px-7 lg:py-4 py-2 bg-indigo-600 hover:bg-indigo-700 transition-all duration-500 rounded-full">
          <span class="px-2 text-white text-xl font-semibold leading-relaxed">Subscribe</span>
        </button>
      </div>
      </div>
      </div>
      </div>