Home
Amit Pachange
Highlighted Important section with button

Highlighted Important section with button

This tailwind example is contributed by Amit Pachange, on 21-Jan-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are CTA,banner

Call to Action

Author Amit Pachange

9.1k

Fork Fullscreen

<div class="bg-gray-100 pb-6">
    <div
        class="text-center lg:text-left max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
        <h3 class="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-tight">
            Ready to monitor some websites?<br>
            <span class="text-blue-600">Get started for free.</span>
        </h3>
        <div class="justify-center lg:justify-left mt-8 flex lg:flex-shrink-0 lg:mt-0">
            <div class="inline-flex">
                <a href="" target="_blank"
                    class="inline-flex items-center justify-center px-5 py-3 text-base leading-6 font-medium text-blue-600 hover:text-blue-500 focus:outline-none transition duration-150 ease-in-out">
                    See in action
                </a>
            </div>
            <div class="ml-3 inline-flex rounded-md shadow">
                <a href=""
                    class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
                    Get started
                </a>
            </div>
        </div>
    </div>
</div>

Related Examples

CTA Search Section
CTA search form

Author:
EliteAI Tools

6 months ago

678
Call to action section with image

Author:
Steven Kuhn

2 years ago

9.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

9 months ago

1.2k
CTA - Htmlwind
Screenshot on dark background

Author:
Htmlwind

1 month ago

107
Basic CTA card

Author:
kishan pc

1 year ago

2k
Hero section with call to action buttons

Author:
Prashant

3 years ago

14.4k
Jumbotron card

Author:
Sienna

2 years ago

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

Author:
magersa

1 year ago

3.9k
Minimal CTA section

Author:
Laurits

2 years ago

9k
E-Commerce Delivery Truck Animation
This responsive CSS animation showcases a delivery bus transporting a package to its destination, created entirely with Tailwind CSS and pure HTML. The animation features

Author:
Bonimater

1 month ago

260
Responsive CTA
Tailwind CTA card

Author:
Dika Rahman

1 year ago

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

7 months ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components