Home
Leon Bachmann
Call to action

Call to action

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

Call to Action

Author Leon Bachmann

9.8k

Fork Fullscreen

<div class="relative overflow-hidden bg-gray-900 rounded-2xl m-16">
    <div class="px-16 py-8 sm:px-8 lg:px-16 lg:py-14">
        <div class="md:flex md:items-center md:space-x-12 lg:space-x-24">
            <div class="grid grid-cols-1 gap-y-3 sm:grid-cols-2 gap-x-12 xl:gap-x-24">
                <div>
                    <ul class="space-y-3 text-base font-medium text-white font-pj">
                        <li class="flex items-center">
                            <svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M5 13l4 4L19 7">
                                </path>
                            </svg> Unlimited updates
                        </li>
                        <li class="flex items-center">
                            <svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M5 13l4 4L19 7">
                                </path>
                            </svg> Bigger app size
                        </li>
                        <li class="flex items-center">
                            <svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M5 13l4 4L19 7">
                                </path>
                            </svg> More version Storage
                        </li>
                    </ul>
                </div>
                <div>
                    <ul class="space-y-3 text-base font-medium text-white font-pj">
                        <li class="flex items-center">
                            <svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M5 13l4 4L19 7">
                                </path>
                            </svg> Custom domain
                        </li>
                        <li class="flex items-center">
                            <svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M5 13l4 4L19 7">
                                </path>
                            </svg> Special API access
                        </li>
                        <li class="flex items-center">
                            <svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M5 13l4 4L19 7">
                                </path>
                            </svg> Bulk upload
                        </li>
                    </ul>
                </div>
            </div>
            <div class="block md:hidden lg:block">
                <div class="hidden lg:block">
                    <svg class="w-4 h-auto text-gray-600" viewBox="0 0 16 123" fill="none" stroke="currentColor"
                        xmlns="http://www.w3.org/2000/svg">
                        <line y1="-0.5" x2="18.0278" y2="-0.5"
                            transform="matrix(-0.83205 -0.5547 -0.5547 0.83205 15 11)"></line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5"
                            transform="matrix(-0.83205 -0.5547 -0.5547 0.83205 15 46)"></line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5"
                            transform="matrix(-0.83205 -0.5547 -0.5547 0.83205 15 81)"></line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5"
                            transform="matrix(-0.83205 -0.5547 -0.5547 0.83205 15 116)"></line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5"
                            transform="matrix(-0.83205 -0.5547 -0.5547 0.83205 15 18)"></line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5"
                            transform="matrix(-0.83205 -0.5547 -0.5547 0.83205 15 53)"></line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5"
                            transform="matrix(-0.83205 -0.5547 -0.5547 0.83205 15 88)"></line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5"
                            transform="matrix(-0.83205 -0.5547 -0.5547 0.83205 15 123)"></line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5"
                            transform="matrix(-0.83205 -0.5547 -0.5547 0.83205 15 25)"></line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5"
                            transform="matrix(-0.83205 -0.5547 -0.5547 0.83205 15 60)"></line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5"
                            transform="matrix(-0.83205 -0.5547 -0.5547 0.83205 15 95)"></line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5"
                            transform="matrix(-0.83205 -0.5547 -0.5547 0.83205 15 32)"></line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5"
                            transform="matrix(-0.83205 -0.5547 -0.5547 0.83205 15 67)"></line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5"
                            transform="matrix(-0.83205 -0.5547 -0.5547 0.83205 15 102)"></line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5"
                            transform="matrix(-0.83205 -0.5547 -0.5547 0.83205 15 39)"></line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5"
                            transform="matrix(-0.83205 -0.5547 -0.5547 0.83205 15 74)"></line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5"
                            transform="matrix(-0.83205 -0.5547 -0.5547 0.83205 15 109)"></line>
                    </svg>
                </div>
                <div class="block mt-10 md:hidden">
                    <svg class="w-auto h-4 text-gray-600" viewBox="0 0 172 16" fill="none" stroke="currentColor"
                        xmlns="http://www.w3.org/2000/svg">
                        <line y1="-0.5" x2="18.0278" y2="-0.5" transform="matrix(-0.5547 0.83205 0.83205 0.5547 11 1)">
                        </line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5" transform="matrix(-0.5547 0.83205 0.83205 0.5547 46 1)">
                        </line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5" transform="matrix(-0.5547 0.83205 0.83205 0.5547 81 1)">
                        </line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5" transform="matrix(-0.5547 0.83205 0.83205 0.5547 116 1)">
                        </line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5" transform="matrix(-0.5547 0.83205 0.83205 0.5547 151 1)">
                        </line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5" transform="matrix(-0.5547 0.83205 0.83205 0.5547 18 1)">
                        </line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5" transform="matrix(-0.5547 0.83205 0.83205 0.5547 53 1)">
                        </line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5" transform="matrix(-0.5547 0.83205 0.83205 0.5547 88 1)">
                        </line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5" transform="matrix(-0.5547 0.83205 0.83205 0.5547 123 1)">
                        </line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5" transform="matrix(-0.5547 0.83205 0.83205 0.5547 158 1)">
                        </line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5" transform="matrix(-0.5547 0.83205 0.83205 0.5547 25 1)">
                        </line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5" transform="matrix(-0.5547 0.83205 0.83205 0.5547 60 1)">
                        </line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5" transform="matrix(-0.5547 0.83205 0.83205 0.5547 95 1)">
                        </line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5" transform="matrix(-0.5547 0.83205 0.83205 0.5547 130 1)">
                        </line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5" transform="matrix(-0.5547 0.83205 0.83205 0.5547 165 1)">
                        </line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5" transform="matrix(-0.5547 0.83205 0.83205 0.5547 32 1)">
                        </line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5" transform="matrix(-0.5547 0.83205 0.83205 0.5547 67 1)">
                        </line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5" transform="matrix(-0.5547 0.83205 0.83205 0.5547 102 1)">
                        </line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5" transform="matrix(-0.5547 0.83205 0.83205 0.5547 137 1)">
                        </line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5" transform="matrix(-0.5547 0.83205 0.83205 0.5547 172 1)">
                        </line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5" transform="matrix(-0.5547 0.83205 0.83205 0.5547 39 1)">
                        </line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5" transform="matrix(-0.5547 0.83205 0.83205 0.5547 74 1)">
                        </line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5" transform="matrix(-0.5547 0.83205 0.83205 0.5547 109 1)">
                        </line>
                        <line y1="-0.5" x2="18.0278" y2="-0.5" transform="matrix(-0.5547 0.83205 0.83205 0.5547 144 1)">
                        </line>
                    </svg>
                </div>
            </div>
            <div class="mt-10 md:mt-0">
                <a title="Get quote now"
                    class="inline-flex items-center justify-center px-9 py-3.5 mt-5 text-base font-bold text-gray-900 transition-all duration-200 bg-white border border-transparent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white font-pj hover:bg-opacity-90 rounded-xl"
                    href="#support"> Get quote now
                </a>
            </div>
        </div>
    </div>
</div>

Related Examples

Responsive CTA

Author:
Lukas Müller

3 years ago

10.1k
Join Our Community Banner
Encourage users to become members of a community.

Author:
Diego Chavez

2 years ago

8.6k
Free Animated Gradient Glow Button with Tailwind CSS
A modern, responsive Tailwind CSS button with glowing gradient hover effects, smooth animations, and an integrated SVG icon. Perfect for landing pages, call-to-action buttons, or any stylish UI project. Fully customizable and open source , ready to copy, paste, and use in your projects.

Author:
Homayoun

5 months ago

382
Product Page
Showcase for the product.

Author:
Prem..

3 years ago

33.1k
Modern Dark Footer with Overlapping Gradient CTA
A comprehensive, dark-themed website footer component built with HTML and Tailwind CSS. It features a visually distinct overlapping section with a colorful gradient background containing a prominent call-to-action (CTA) block. The main footer area utilizes a multi-column grid layout for organized navigation links, a newsletter signup form, and social media icons. A final bottom bar includes legal links and copyright information. The design is responsive and adapts its layout for different screen sizes.

Author:
Hamza Atig

10 months ago

1.1k
CTA - Htmlwind
Screenshot on dark background

Author:
Htmlwind

9 months ago

1.1k
Call ya
Simple Call-to-Action

Author:
Matti

1 year ago

1.3k
Hero Section
Full width hero section for landing pages

Author:
Manon Daniel

3 years ago

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

11 months ago

1.6k
Bug Beach Day Heatwave
This playful animation brings sweltering summer insects to life with pure HTML and Tailwind CSS. Watch as: 🔥 Glowing Fireflies pulse with heat-radiant light, their wings shimmering in the desert sun 🐞 Overheated Ladybugs scuttle across cracked earth, their red shells reflecting the blazing heat ☀️ A Wobbling Sun dominates the sky, emitting pulsing heat waves across the animated landscape

Author:
Bonimater

9 months ago

1.1k
Call to action section

Author:
Leon Bachmann

3 years ago

6.9k
stepper
The Stepper Component is a versatile and user-friendly tool designed to guide users through a sequence of steps. Whether you're building a multi-step form, a tutorial, or any process that requires sequential navigation, this component makes it easy to implement and customize.

Author:
Abhiraj

1 year ago

2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components