Call to action

This tailwind example is contributed by Sophia Baker, on 12-Dec-2022. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are CTA,banner

Call to Action

Author Sophia Baker

Tailwind v3.4 11.5k 12

Fork Fullscreen

<div class="py-8 px-4 mx-auto sm:py-16 lg:px-6 bg-green-50 mt-40">
    <div class="mx-auto max-w-screen-sm text-center">
        <h2 class="mb-4 text-3xl tracking-tight font-bold leading-tight text-green-800">Start your
            free trial today</h2>
        <p class="mb-6 text-green-700 md:text-lg">Try now. 30-day money-back guarantee</p>

<a href="#"
            class="inline-flex items-center justify-center px-5 py-3 mr-3 text-base font-medium text-center text-white rounded-lg bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-500 ">
            Get started
            <svg class="w-5 h-5 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd"
                    d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
                    clip-rule="evenodd"></path>
            </svg>
        </a>
    </div>
</div>

Related Examples

Call to action section with image

Emily Tan

3 years ago

12.4k
CTA - call to action section

ABDO-SY

1 year ago

1.3k
Animated Call-to-Action Section
Enhance your website with this , animated CTA section. Includes a gradient text animations, and a stylish avatar group. Easily customizable and designed to improve user engagement. Get the source code now.

Homayoun

1 year ago

763
bottom drawer with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

3.3k
Domain For Sale Template
Domain For Sale Template

Geoffrey Callaghan

2 years ago

5.1k
CTA Responsive
Gradient Style CTA

KULDEEP

1 year ago

1.1k
Travel Landing Page: Australia

Maxim

1 year ago

3k
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.

Banshee

1 year ago

3.6k
Buy Me a Coffee CTA section

Sienna

3 years ago

10.5k
Geaux Code CTA Section
CTA with background patterns

Andrew Weisbeck

2 years ago

2.7k
Call to action section

Leon Bachmann

3 years ago

7.5k
Contact Us Form
CTAs help convert visitors into action-takers (customers, subscribers, etc.), while Contact Us forms enable easy communication, building trust and support. Both are vital for engaging visitors and achieving your website’s objectives.

KULDEEP

1 year ago

1.6k