Home
Monica D.
Call to Action with Background image

Call to Action with Background image

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

Call to Action

Author Monica D.

789

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

Author:
Leon Bachmann

1 year ago

7.1k
Minimal CTA section

Author:
Laurits

2 years ago

7.8k
YouTube subscription section

Author:
Leif99

1 year ago

13.2k
Call to example
Call to example using radial-gradient

Author:
Oliver Hansen

1 year ago

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

2 months ago

483
Applications Showcase
This is a stylish and interactive application showcase component designed for web use. It features the following elements: Background Styling: The main container has a rounded-rectangle shape (rounded-3xl) with a subtle white base overlaying a high-resolution background image, styled with background-size: 600px for an artistic touch. The image itself dynamically serves as a backdrop, giving the component a layered appearance. Main Icon: A small circular icon, located at the top-right corner, appears with smooth hover effects: Enlarges to double its size (scale-[2]). Rotates (rotate-[410deg]). Moves diagonally upwards-right (translate-x-3, -translate-y-3). These transitions occur over a duration of 1 second (transition duration-1000). Overlay Gradient: A transparent gradient overlay (bg-gradient-to-l) adds a polished depth effect, transitioning from black (from-black/80) to lighter shades. App Icon and Info: Icon: The app icon is a smaller, bordered square image (rounded-2xl) with hover shrink animations (group-hover:scale-95). Text: A bold application title (text-md font-semibold) with hover-animated underline effects that gradually expand from left to right. A short app description styled as secondary text. Call-to-Action Button: Below the card is a subtle, rounded button (rounded-full) encouraging interaction. It features: A hover effect with color inversion (gray to black). A lift effect (hover:-translate-y-1) when hovered. This component is perfect for modern app showcases, offering a dynamic, user-friendly visual experience. It ensures a professional look while engaging users through smooth animations and clear calls to action.

Author:
Banshee

1 week ago

229
Take a Survey CTA section

Author:
JaxStone

1 year ago

9.6k
Hero section with call to action buttons

Author:
Prashant

2 years ago

12.3k
Product review card

Author:
Rama krishnan Subramanian

2 months ago

149
Call to action section with image

Author:
Steven Kuhn

1 year ago

7.9k
Responsive call to action

Author:
Leon Bachmann

1 year ago

8.1k
CTA card with gradient background
Grab users attention using this eye catching CTA card

Author:
Emre Yılmaz

10 months ago

2.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components