Fancy call to action

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

Call to Action

Author Leon Bachmann

Tailwind v3.4 11.2k 15

Fork Fullscreen

<div class="relative pt-20">
        <div aria-hidden="true" class="hidden sm:block">
            <div class="absolute inset-y-0 left-0 w-1/2 bg-gray-800 rounded-r-3xl">
            </div>
            <svg class="absolute top-8 left-1/2 -ml-3" width="404" height="392" fill="none" viewBox="0 0 404 392">
                <defs>
                    <pattern id="8228f071-bcee-4ec8-905a-2a059a2cc4fb" x="0" y="0" width="20" height="20"
                        patternUnits="userSpaceOnUse">
                        <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor"></rect>
                    </pattern>
                </defs>
                <rect width="404" height="392" fill="url(#8228f071-bcee-4ec8-905a-2a059a2cc4fb)"></rect>
            </svg>
        </div>
        <div class="mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8">
            <div class="relative rounded-2xl px-6 py-10 bg-gray-700 overflow-hidden shadow-xl sm:px-12 sm:py-20">
                <div aria-hidden="true" class="absolute inset-0 -mt-72 sm:-mt-32 md:mt-0"><svg
                        class="absolute inset-0 h-full w-full" preserveAspectRatio="xMidYMid slice"
                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1463 360">
                        <path class="text-gray-600 text-opacity-40" fill="currentColor"
                            d="M-82.673 72l1761.849 472.086-134.327 501.315-1761.85-472.086z"></path>
                        <path class="text-gray-800 text-opacity-40" fill="currentColor"
                            d="M-217.088 544.086L1544.761 72l134.327 501.316-1761.849 472.086z"></path>
                    </svg>
                </div>
                <div class="relative flex flex-col">
                    <div class="sm:text-center">
                        <h2 class="text-3xl font-extrabold text-white tracking-tight sm:text-4xl"> Push hot code updates
                        </h2>
                        <p class="mt-6 mx-auto max-w-2xl text-lg text-gray-100"> Like you push a commit </p>
                    </div>
                    <a href="#"
                        class="w-auto inline-block mt-5 mx-auto rounded-md border border-transparent px-5 py-3 bg-gray-900 text-base font-medium text-white shadow hover:bg-black focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-rose-500 sm:px-10">
                        Get started →
                    </a>
                </div>
            </div>
        </div>
    </div>

</div>

Related Examples

Call to action section with image

Steven Kuhn

3 years ago

10.9k
Responsive CTA

Lukas Müller

3 years ago

10.5k
Jumbotron card

Sienna

3 years ago

12.3k
animated nav
animated nav

Bonimater

1 year ago

862
Call to Action

Abdul Baset Bappy

1 year ago

1.2k
Call to action
CTA

inbarajan P

2 years ago

2.5k
CTA Search Section
CTA search form

EliteAI Tools

1 year ago

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

András Szehofner

1 year ago

1.8k
asimple game Quest Log
asimple game lay out Quest Log

Bonimater

1 year ago

1.1k
Contact us Form with Responsive

KULDEEP

1 year ago

1.1k
Hero Section
Full width hero section for landing pages

Manon Daniel

4 years ago

15k
Clean & Responsive Footer Design with Tailwind CSS With CTA Button
modern and responsive footer built with Tailwind CSS to enhance website navigation, accessibility, and user experience. Featuring quick links, social media icons, copyright info, and a sleek layout, this SEO-friendly footer improves engagement and usability across all devices. Perfect for portfolios, business websites, and eCommerce stores!

Abdul Baset Bappy

1 year ago

1.5k