Highlighted Important section with button

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

Call to Action

Author Amit Pachange

Tailwind v3.4 10.2k 14

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

Hero section

Mohit Prajapati

4 years ago

12.9k
Call to action block

Sienna

3 years ago

12.4k
Banner for app download
Show App Download Buttons for the App Store and Play Store

Pixel Perfect

2 years ago

2.1k
Hero section with button

Samuel Dawson

3 years ago

13.5k
stepper
The Stepper Component is a versatile and user-friendly tool designed to guide users through a sequence of steps. Whether you're building a multi-step form, a tutorial, or any process that requires sequential navigation, this component makes it easy to implement and customize.

Abhiraj

1 year ago

2.9k
Call to action section

Odessa Young

3 years ago

13.5k
Responsive About Section with Tailwind CSS
Built a sleek and fully responsive About Section for my portfolio using Tailwind CSS! 🚀 Designed for smooth adaptability across all screen sizes with a modern and minimal aesthetic. Perfect for showcasing skills, experience, and a personal touch!

Abdul Baset Bappy

1 year ago

2k
Landing page hero section UI
Modern Hero Section Design

UI-Templates

11 months ago

1.5k
Call to action
slightly tilted call to action section

Simon Scheffer

3 years ago

11.9k
CTA - Htmlwind
Screenshot on dark background

Htmlwind

1 year ago

1.9k
Hero Section
Full width hero section for landing pages

Manon Daniel

4 years ago

15k
Bubblegum Button
This interactive button component is designed with a sleek gradient background and smooth hover effects, making it an eye-catching call-to-action element for modern web interfaces. Styling and Features: ✅ Gradient Background & Rounded Shape • The button container has a subtle gradient overlay (bg-gradient-to-tr) that smoothly transitions from soft pink (from-pink-300) to light blue (to-blue-300), giving it a vibrant and modern look. • Wrapped in a rounded-full container for a pill-shaped aesthetic. ✅ Floating & Shadow Effects • The shadow-lg property creates a soft floating effect, enhancing depth and visibility. • Will-change-transform optimizes animations for a seamless hover experience. ✅ Interactive Hover Animations • On hover, the inner button scales up (hover:scale-105) and lifts slightly (hover:-translate-y-2), simulating a press-and-release motion. • The transition is smooth, with a 500ms animation (transition duration-500). ✅ Content & Icon • The “Learn more” label is paired with a right-arrow icon (svg) for clear visual guidance. • The icon and text are flex-aligned (items-center flex), ensuring a balanced and responsive layout. This button is ideal for call-to-action elements, product highlights, or download prompts, offering a modern, sleek, and engaging user experience. 🚀

Banshee

1 year ago

1.9k