Call to action section with image

This tailwind example is contributed by Steven Kuhn, on 21-Jan-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are CTA,banner,banner

Call to Action Jumbotron

Author Steven Kuhn

Tailwind v3.4 10.9k 14

Fork Fullscreen

<section class="py-12 md:py-24">
    <div class="w-full max-w-6xl mx-auto px-4 sm:px-6 md:px-8 relative">
        <div class="shadow rounded-xl">
            <div class="grid overflow-hidden text-white shadow-xl md:grid-cols-2 bg-blue-600 rounded-xl">
                <aside class="p-8 space-y-4 md:p-16">
                    <h2 class="text-2xl font-bold tracking-tight md:text-4xl font-headline">
                        Ready to dive in?
                        Start your free trial today.
                    </h2>

<p class="font-medium text-blue-100 md:text-2xl">
                        Create an account to enjoy your 5-day free trial, no credit card required.
                    </p>

<div>
                        <a href="" class="bg-white text-blue-600 px-4 py-2 mt-3 rounded-xl">
                            Start free trial
                        </a>
                    </div>
                </aside>