Promotion Block

It features a large, centered title, a brief description, and a prominent CTA button, all centered within a visually appealing layout.

This tailwind example is contributed by Computer guy, on 12-Sep-2023. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are CTA,banner

Call to Action

Author Computer guy

Tailwind v3.4 8.4k 18

Fork Fullscreen

<div class="dark:bg-gray-700 p-4 min-h-screen">
    <div class="relative py-12 overflow-hidden">
        <div aria-hidden="true" class="absolute inset-0 w-full m-auto grid grid-cols-2 -space-x-52 opacity-20"></div>
        <div class="max-w-7xl mx-auto px-6 md:px-12 xl:px-6">
            <div class="relative">
                <div class="flex items-center justify-center h-[50vh] px-2 sm:px-0">
                    <div class="mt-6 m-auto space-y-6 w-full sm:w-8/12 md:w-7/12">
                        <h1
                            class="text-center text-3xl sm:text-4xl md:text-5xl font-bold text-gray-700 dark:text-white">
                            Want to build
                            Custom Software?
                        </h1>
                        <p class="text-center text-sm sm:text-base md:text-xl text-gray-600 dark:text-gray-300">Launch
                            your
                            Product in
                            15 days</p>
                        <div class="flex flex-wrap justify-center gap-4 sm:gap-6">
                            <a href="" target="_blank"
                                class="relative flex h-9 w-full items-center justify-center px-8 before:absolute 
                                  before:inset-0 before:rounded-full before:bg-teal-400 before:transition before:duration-300 
                                  hover:before:scale-105 active:duration-75 active:before:scale-95 sm:w-max">
                                <span class="relative text-sm font-semibold text-white">
                                    Launch your MVP
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

Call to action banner

isolde

2 years ago

6.1k
Get Started ,Membership section - responsive - darkMode

ABDO-SY

1 year ago

1.5k
Call for action

Sophia Baker

3 years ago

12.4k
CTA - Htmlwind
Screenshot on dark background

Htmlwind

1 year ago

1.9k
Responsive CTA

Lukas Müller

3 years ago

10.5k
Tilted button on hover.
A simple button with a gradient and tilt on hover. Dark mode supported with same color.

András Szehofner

1 year ago

1.8k
Jumbotron card

Sienna

3 years ago

12.3k
Boimator welcoming back
Boimator welcoming back

Bonimater

1 year ago

1k
bottom drawer with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

3.3k
Free Animated Gradient Glow Button with Tailwind CSS
A modern, responsive Tailwind CSS button with glowing gradient hover effects, smooth animations, and an integrated SVG icon. Perfect for landing pages, call-to-action buttons, or any stylish UI project. Fully customizable and open source , ready to copy, paste, and use in your projects.

Homayoun

1 year ago

1.1k
Centered footer with CTA
Use this Tailwind CSS footer compoent for simple footer with center aligned everything and with CTA buttons.

Pagedone

2 years ago

2.7k
Card
New type Card and premium card.

Arjun Kumar

5 months ago

440