Home
Computer guy
Promotion Block

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 CSS v3. It is responsive. It supports dark mode. similar terms for this example are CTA,banner

Call to Action

Author Computer guy

7.4k

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

Travel Landing Page: Australia

Author:
Maxim

7 months ago

1.7k
Geaux Code CTA Section
CTA with background patterns

Author:
Andrew Weisbeck

1 year ago

1.8k
stepper
The Stepper Component is a versatile and user-friendly tool designed to guide users through a sequence of steps. Whether you're building a multi-step form, a tutorial, or any process that requires sequential navigation, this component makes it easy to implement and customize.

Author:
Abhiraj

9 months ago

1.3k
Bubblegum Button
This interactive button component is designed with a sleek gradient background and smooth hover effects, making it an eye-catching call-to-action element for modern web interfaces. Styling and Features: ✅ Gradient Background & Rounded Shape • The button container has a subtle gradient overlay (bg-gradient-to-tr) that smoothly transitions from soft pink (from-pink-300) to light blue (to-blue-300), giving it a vibrant and modern look. • Wrapped in a rounded-full container for a pill-shaped aesthetic. ✅ Floating & Shadow Effects • The shadow-lg property creates a soft floating effect, enhancing depth and visibility. • Will-change-transform optimizes animations for a seamless hover experience. ✅ Interactive Hover Animations • On hover, the inner button scales up (hover:scale-105) and lifts slightly (hover:-translate-y-2), simulating a press-and-release motion. • The transition is smooth, with a 500ms animation (transition duration-500). ✅ Content & Icon • The “Learn more” label is paired with a right-arrow icon (svg) for clear visual guidance. • The icon and text are flex-aligned (items-center flex), ensuring a balanced and responsive layout. This button is ideal for call-to-action elements, product highlights, or download prompts, offering a modern, sleek, and engaging user experience. 🚀

Author:
Banshee

9 months ago

1.2k
Tailwind CTA section

Author:
Moriba Traore

2 years ago

12.9k
Basic CTA card

Author:
kishan pc

1 year ago

2.2k
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.

Author:
Homayoun

1 month ago

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

Author:
András Szehofner

9 months ago

956
Modern Dark Footer with Overlapping Gradient CTA
A comprehensive, dark-themed website footer component built with HTML and Tailwind CSS. It features a visually distinct overlapping section with a colorful gradient background containing a prominent call-to-action (CTA) block. The main footer area utilizes a multi-column grid layout for organized navigation links, a newsletter signup form, and social media icons. A final bottom bar includes legal links and copyright information. The design is responsive and adapts its layout for different screen sizes.

Author:
Hamza Atig

6 months ago

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

Author:
Prajwal Hallale

2 years ago

9.6k
Call to Action with Background image

Author:
Monica D.

1 year ago

1.9k
Drinkware landing page

Author:
Maxim

7 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components