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

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 Card
Early Access Signup Card

Author:
Santiago Hernandez

1 year ago

2k
Product hunt showcase section

Author:
Leon Bachmann

3 years ago

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

Author:
Anonymous

2 years ago

20.3k
Hero section with button

Author:
Samuel Dawson

3 years ago

12.9k
Basic CTA
Simple and straightforward call to action section

Author:
Dipti narayan

2 years ago

7.8k
Responsive About Section with Tailwind CSS
Built a sleek and fully responsive About Section for my portfolio using Tailwind CSS! 🚀 Designed for smooth adaptability across all screen sizes with a modern and minimal aesthetic. Perfect for showcasing skills, experience, and a personal touch!

Author:
Abdul Baset Bappy

11 months ago

1.6k
Footer
A footer is a critical part of any professional website. A footer ensures your website is complete, professional, user-friendly, and legally compliant. It's where users go for answers when they're done scrolling.

Author:
KULDEEP

8 months ago

1k
Product Page
Showcase for the product.

Author:
muhamadrofii911

1 year ago

2.6k
Minimal CTA section

Author:
Laurits

3 years ago

9.5k
Travel Landing Page: Australia

Author:
Maxim

11 months ago

2.3k
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. 🚀

Author:
Banshee

1 year ago

1.7k
Landing page hero section UI
Modern Hero Section Design

Author:
UI-Templates

4 months ago

773

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components