Tailwind CSS Call-to-Action Sections Blocks | Preline UI

Update v4.2 - New components, 10+ framework guides, and quality improvements. Visit Changelog

All Blocks
Marketing
Call-to-Action Sections

Call-to-Action Sections

Tailwind CSS call-to-action sections with headings, text, and buttons to boost conversions.

Centered Call-to-Action Section with Dual Actions Pro

Short headline copy sits in the center with two primary actions grouped beneath it.

<div class="max-w-6xl px-4 sm:px-6 lg:px-8 mx-auto">
                      <div class="md:-mx-4 xl:-mx-20 px-4 py-6 md:py-12 xl:p-20 bg-linear-to-b from-background-2 to-transparent rounded-2xl">
                        <div class="mb-4 sm:mb-8 text-center">
                          <p class="mb-2 font-mono text-sm text-muted-foreground-1">
                            Get started
                          </p>
                          <h2 class="font-semibold text-2xl sm:text-4xl text-foreground">
                            The Web App powering<br>thousands of companies.
                          </h2>
                        </div>

<div class="flex flex-wrap justify-center items-center gap-2">
                          <a class="py-2 px-3 md:py-2.5 md:px-4 inline-flex justify-center items-center gap-x-1.5 whitespace-nowrap text-[13px] md:text-sm rounded-lg shadow-md bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover hover:shadow-none focus:outline-hidden focus:bg-primary-focus focus:shadow-none disabled:opacity-50 disabled:pointer-events-none" href="#">
                            Try it free
                          </a>
                          <a class="group py-2 px-3 md:py-2.5 md:px-4 inline-flex justify-center items-center gap-x-1.5 whitespace-nowrap text-[13px] md:text-sm rounded-lg border border-transparent text-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden" href="#">
                            Get a demo
                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path class="lg:opacity-0 lg:-translate-x-1 lg:group-hover:opacity-100 lg:group-hover:translate-x-0 lg:group-focus:opacity-100 lg:group-focus:translate-x-0 lg:transition" d="M5 12h14"/><path class="lg:-translate-x-1.5 lg:group-hover:translate-x-0 lg:group-focus:translate-x-0 lg:transition" d="m12 5 7 7-7 7"/></svg>
                          </a>
                        </div>
                      </div>
                    </div>

Open related SaaS Startup homepage

;