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

CTA block for "Take our survey"
Get users attention to he survey form

Prajwal Hallale

3 years ago

9.7k
Call to action component
Start your free 7-day trial Call to action button

S. Patel

3 years ago

8.5k
Call to Action

Abdul Baset Bappy

1 year ago

1.3k
Call to action
Call to action section. find it makecomponents.com

makecomponents

2 years ago

2.7k
Modern responsive Newsletter form
Responsive newsletter subscriber form

Emdadul Islam

2 years ago

3.5k
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

KULDEEP

1 year ago

2.5k
Hero section with button

Samuel Dawson

3 years ago

13.5k
Minimalistic hero section

Sophia Baker

3 years ago

12k
an off line game of catching afox
an off line game of catching afox

Bonimater

1 year ago

1.1k
Interactive Pricing Table
This modern pricing component features a visually appealing, responsive layout with smooth hover effects, making it ideal for showcasing different plans and subscription tiers. Design and Features: ✅ Elegant Gradient Backgrounds • Each pricing card has a unique gradient overlay, transitioning from soft gray, blue, or indigo to white, enhancing contrast and visual appeal. • The rounded-2xl design ensures a polished and smooth aesthetic. ✅ Interactive Hover Effects • Cards have a subtle hover shadow enhancement, making them pop on interaction (hover:shadow-[0_0px_25px_0px_rgba(0,0,0,0.2)]). • Slight floating effect (hover:translate-y-[-5px]) gives the illusion of elevation on hover. ✅ Pricing & Plan Details • Each card presents a plan title, a short subtitle, and a bold price display (text-3xl font-extrabold text-indigo-500). • Supports free, subscription-based, and enterprise-tier pricing, ensuring flexibility for different business models. ✅ Call-to-Action Buttons • Each plan features a highly visible CTA button (bg-indigo-700 text-white rounded-md). • The buttons change color on hover (hover:bg-indigo-500) and expand slightly, encouraging user interaction. ✅ Animated Background Icons • A large, transparent icon (text-[500px] text-gray-100) dynamically moves on hover (group-hover:-translate-y-8 group-hover:-translate-x-8), adding depth and a premium feel. This pricing component is perfect for SaaS platforms, digital subscriptions, and service offerings, ensuring a modern, sleek, and engaging user experience. 🚀

Banshee

1 year ago

2.1k
Hero section with a gradient background
With text overlay, and a call-to-action button

Anonymous

3 years ago

21.2k
Product hunt showcase section

Leon Bachmann

3 years ago

10.9k