ctasBeginner

CTA — Stacked

Stacked CTA with headline, supporting copy, and centered button.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a vertical stacked CTA with Tailwind: heading on top, supporting paragraph, and a single solid CTA centered below. Used as a closing punch on marketing pages.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/ctas/4.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-cta-4
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class=" w-full">
<section>
      <div class="mx-auto max-w-screen-2xl px-4 py-8 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
          <div class="bg-blue-600 p-8 md:p-12 lg:px-16 lg:py-24">
            <div class="mx-auto max-w-xl text-center">
              <h2 class="text-2xl font-bold text-white md:text-3xl">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit
              </h2>

              <p class="hidden text-white/90 sm:mt-4 sm:block">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et, egestas tempus tellus
                etiam sed. Quam a scelerisque amet ullamcorper eu enim et fermentum, augue. Aliquet
                amet volutpat quisque ut interdum tincidunt duis.
              </p>

              <div class="mt-4 md:mt-8">
                <a
                  href="#"
                  class="inline-block rounded-sm border border-white bg-white px-12 py-3 text-sm font-medium text-blue-500 transition hover:bg-transparent hover:text-white focus:ring-2 focus:ring-yellow-400 focus:outline-hidden"
                >
                  Get Started Today
                </a>
              </div>
            </div>
          </div>

          <div class="grid grid-cols-2 gap-4 md:grid-cols-1 lg:grid-cols-2">
            <img
              alt=""
              src="https://images.unsplash.com/photo-1621274790572-7c32596bc67f?auto=format&fit=crop&q=80&w=1160"
              class="h-40 w-full object-cover sm:h-56 md:h-full"
            />

            <img
              alt=""
              src="https://images.unsplash.com/photo-1567168544813-cc03465b4fa8?auto=format&fit=crop&q=80&w=1160"
              class="h-40 w-full object-cover sm:h-56 md:h-full"
            />
          </div>
        </div>
      </div>
    </section>
  </div>
</div>