Home
Leon Bachmann
Fancy call to action

Fancy call to action

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

Call to Action

Author Leon Bachmann

10.2k

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

Author:
Steven Kuhn

2 years ago

9.3k
Responsive CTA

Author:
Lukas Müller

2 years ago

9.6k
Jumbotron card

Author:
Sienna

2 years ago

11.4k
Basic CTA
Simple and straightforward call to action section

Author:
Dipti narayan

1 year ago

7.4k
E-Commerce Delivery Truck Animation
This responsive CSS animation showcases a delivery bus transporting a package to its destination, created entirely with Tailwind CSS and pure HTML. The animation features

Author:
Bonimater

1 month ago

363
Banner for app download
Show App Download Buttons for the App Store and Play Store

Author:
Pixel Perfect

1 year ago

1.3k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

1 year ago

2.9k
Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Author:
Coastal UI

9 months ago

1.2k
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

3 months ago

643
Call to Action (CTA with Background Image)
A Call to Action (CTA) is an essential element in marketing and web design that prompts users to take a specific desired action. When combined with a compelling background image, it can significantly enhance user engagement and conversion rates.

Author:
Eliyanto Sarage

1 year ago

2k
Call to action (CTA) section
Modern and clean CTA section

Author:
Bunny

2 years ago

11.6k
CTA card with gradient border

Author:
Sameer Sultana

2 years ago

13.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components