Home
Simon Scheffer
Call to action

Call to action

slightly tilted call to action section

This tailwind example is contributed by Simon Scheffer, on 07-Dec-2022. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are CTA,banner,find

Call to Action Search Bar

Author Simon Scheffer

10.3k

Fork Fullscreen

<section class="mt-12 lg:mt-24">
    <div class="bg-teal-500 text-white -skew-y-1">
        <div class="container mx-auto skew-y-1">
            <div class="flex flex-col items-center py-10 text-center lg:py-20">
                <div class="w-full px-4 lg:w-1/2 lg:px-0">
                    <div class="mb-8">
                        <h2 class="text-3xl lg:text-4xl font-bold mb-3">
                            Looking for a solution?
                        </h2>
                        <p class="text-lg lg:text-xl opacity-80">
                            Search the forum for the answer to your question
                        </p>
                    </div>

<div class="text-lg">
                        <p>
                            Can't find what you're looking for?<br class="sm:hidden">
                            <a href="#" class="border-b border-white pb-1">
                                Create a new thread
                            </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Related Examples

Search bar

Author:
Arya

2 years ago

30.1k
Search bar with filter options

Author:
Piet Vriend

2 years ago

23.8k
Large search bar with icon

Author:
Prajwal Hallale

2 years ago

10.1k
Responsive search bar
with loading animation on submit button

Author:
Ron Hicks

2 years ago

10.5k
Call to action section

Author:
Odessa Young

1 year ago

11.2k
Call to example
Call to example using radial-gradient

Author:
Oliver Hansen

2 years ago

7.7k
CTA Search Section
CTA search form

Author:
EliteAI Tools

2 months ago

289
Product Page
Showcase for the product.

Author:
Prem..

2 years ago

26.9k
Basic CTA
Simple and straightforward call to action section

Author:
Dipti narayan

1 year ago

7.1k
No distraction search field

Author:
_Amar_

1 year ago

10.9k
Call to action section with image

Author:
Steven Kuhn

2 years ago

8.8k
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. 🚀

Author:
Banshee

1 month ago

302

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components