Home
Leon Bachmann
Call to action section

Call to action section

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

Call to Action

Author Leon Bachmann

6.3k

Fork Fullscreen

<div class="bg-gray-100 dark:bg-gray-800 mt-20">
    <div class="z-20 w-full px-4 py-12 mx-auto text-center sm:px-6 lg:py-16 lg:px-8">
        <h2 class="text-black dark:text-white sm:text-4xl">
            <span class="text-base font-semibold leading-6 text-indigo-500 uppercase">
                IT ONLY TAKES A FEW EASY STEPS
            </span>
            <span class="block mt-2 text-2xl font-extrabold leading-8 text-gray-900 dark:text-white sm:text-3xl sm:leading-9">
                Create your first API in minutes
            </span>
        </h2>

<div class="lg:mt-0 lg:flex-shrink-0">
            <div class="inline-flex mt-12 rounded-md shadow">
                <a href=""
                    class="w-full px-6 py-4 text-base font-semibold text-center text-white transition duration-200 ease-in bg-indigo-600 rounded-lg shadow-md hover:bg-indigo-700 focus:ring-indigo-500 focus:ring-offset-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 ">
                    Get Started Now - It's free
                </a>
            </div>
        </div>
    </div>
</div>

Related Examples

Call to Action section
CTA with clear message and big button

Author:
magersa

1 year ago

3.7k
Call to action

Author:
Leon Bachmann

2 years ago

8.7k
Simple Btn animation

Author:
Ranit Saha

3 months ago

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

5 months ago

1.5k
Call to action component
Start your free 7-day trial Call to action button

Author:
S. Patel

2 years ago

7.5k
Simple call to action

Author:
Laurits

2 years ago

9.3k
Subscribe to our newsletter section

Author:
Conan Hilton

2 years ago

10.6k
Clean CTA section

Author:
Pixel Perfect

1 year ago

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

Author:
Noah Schmidt

2 years ago

15.1k
CTA section with floating icos as background

Author:
EliteAI Tools

4 months ago

559
YouTube subscription section

Author:
Leif99

2 years ago

13.8k
Product review card

Author:
Moriba Traore

2 years ago

14.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components