Home
Elijah Davis
call-to-action button

call-to-action button

This tailwind example is contributed by Elijah Davis, on 01-Feb-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are CTA,banner

Call to Action

Author Elijah Davis

9.7k

Fork Fullscreen

<div class="w-full items-center lg:px-24 max-w-7xl md:px-12 mx-auto px-8 py-12">
    <div class="relative items-center">
        <div class="w-full justify-between lg:inline-flex lg:items-center">
            <div class="max-w-xl">
                <span class="text-sm text-rose-500 font-semibold uppercase tracking-widest">Description</span>
                <p class="text-black font-extrabold mt-8 text-4xl tracking-tight">Get to know Our Brand
                    <span class="lg:block">and it's features.</span>
                </p>
            </div>
            <div class="flex flex-col lg:ml-auto mt-12 sm:flex-row"><a
                    class="w-full items-center inline-flex duration-200 focus:outline-none font-medium justify-center px-6 py-3 rounded-xl text-center focus-visible:outline-black lg:w-auto bg-rose-500 focus-visible:ring-black hover:bg-rose-100 hover:text-rose-500 text-white"
                    href="/signup">Get started now &nbsp;&nbsp;
                    <span class="font-bold text-2xl">
                            →
                    </span>
                </a>
            </div>
        </div>
    </div>
</div>

Related Examples

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

Author:
Diego Chavez

2 years ago

9k
Call to action

Author:
Piet Vriend

3 years ago

11.3k
CTA banner
With fading bg gradient

Author:
Lautaro Gómez

2 years ago

1.8k
Hero section with a gradient background
With text overlay, and a call-to-action button

Author:
Anonymous

3 years ago

21.1k
CTA Responsive
Gradient Style CTA

Author:
KULDEEP

1 year ago

877
an off line game of catching afox
an off line game of catching afox

Author:
Bonimater

1 year ago

1.1k
Simple CTA card

Author:
Santos78

3 years ago

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

Author:
Noah Schmidt

3 years ago

16.9k
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 year ago

3.5k
Clean CTA

Author:
Kofi Osei

3 years ago

12.1k
Tilted button on hover.
A simple button with a gradient and tilt on hover. Dark mode supported with same color.

Author:
Banshee

1 year ago

1.4k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

2 years ago

4.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components