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

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