Call to Action with Background image

This tailwind example is contributed by Monica D., on 13-Jul-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are CTA,banner

Call to Action

Author Monica D.

Tailwind v3.4 2.7k 14

Fork Fullscreen

\
  <div class="relative overflow-hidden rounded-2xl m-16">
     <div class="absolute inset-0">
    <img src="https://images.unsplash.com/photo-1637273045211-df6d2e06b26e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMXx8dGlnZXJ8ZW58MHwwfHx8MTcyMDg4OTc2MHww&ixlib=rb-4.0.3&q=80&w=1925&h625" alt="Background Image" class="object-cover object-center w-full h-full" />
        </div>
        <div class="relative 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">
                        <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>Item 1
                             
                        </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>Item 2
                        </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>Item 3
                        </li>
                    </ul>
                    </div>
                    <div>
                    <ul class="space-y-3 text-base font-medium text-white">
                        <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>Item 1
                             
                        </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>Item 2
                        </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>Item 3
                        </li>
                    </ul>
                 </div>               
            </div>          
            
            <div class="mt-10 md:mt-0">
                <a class="inline-flex items-center px-9 py-3.5 mt-5 text-base font-bold text-white transition-all duration-200 bg-orange-500 border border-transparent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:bg-orange-500 hover:bg-opacity-90 rounded-xl no-underline"
                    href="#"> Subscribe Now!
                </a>
            </div>
        </div>
        </div>

Related Examples

call-to-action button

Elijah Davis

3 years ago

9.7k
Simple Btn animation

Ranit Saha

1 year ago

2.3k
Product Page
Showcase for the product.

Prem..

4 years ago

34.7k
Call to Action section
CTA with clear message and big button

magersa

2 years ago

5.3k
Centered footer with CTA
Use this Tailwind CSS footer compoent for simple footer with center aligned everything and with CTA buttons.

Pagedone

2 years ago

2.7k
Modern CTA section
CTA with background patterns

Nomthandazo Mhlongo

2 years ago

3k
Call to Action (CTA) Section

ariaw

1 year ago

1.2k
Contact us Form with Responsive

KULDEEP

1 year ago

1.1k
Call to action card with image
Responsive card with image

Noah Schmidt

3 years ago

16.9k
Acode master
Welcome to Hamza's official portfolio — a creative developer blending modern design with powerful code. Explore animations, projects, and innovations crafted with HTML, Tailwind CSS, and passion.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
Responsive CTA

Lukas Müller

3 years ago

10.5k
CTA card with gradient border

Sameer Sultana

3 years ago

14.5k