Tailwind CSS Inline CTAs

 <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>

 <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>

<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>