Call to action

This tailwind example is contributed by Sophia Baker, on 12-Dec-2022. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are CTA,banner

Call to Action

Author Sophia Baker

Tailwind v3.4 11.5k 12

Fork Fullscreen

<div class="py-8 px-4 mx-auto sm:py-16 lg:px-6 bg-green-50 mt-40">
    <div class="mx-auto max-w-screen-sm text-center">
        <h2 class="mb-4 text-3xl tracking-tight font-bold leading-tight text-green-800">Start your
            free trial today</h2>
        <p class="mb-6 text-green-700 md:text-lg">Try now. 30-day money-back guarantee</p>

<a href="#"
            class="inline-flex items-center justify-center px-5 py-3 mr-3 text-base font-medium text-center text-white rounded-lg bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-500 ">
            Get started
            <svg class="w-5 h-5 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd"
                    d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
                    clip-rule="evenodd"></path>
            </svg>
        </a>
    </div>
</div>