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.5k

8

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="mb-10">
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <svg class="w-4 h-4 text-gray-900" xmlns="http://www.w3.org/2000/svg" fill="none"
                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z">
                                    </path>
                                </svg>
                            </div>

<form action="#" method="GET">
                                <input type="search" name="search" placeholder="Search here for threads" class="p-4 pl-10 text-gray-600 rounded w-full border-gray-100">
                            </form>
                        </div>
                    </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

31k
Search bar with filter options

Author:
Piet Vriend

2 years ago

24.4k
Large search bar with icon

Author:
Prajwal Hallale

2 years ago

10.2k
Responsive search bar
with loading animation on submit button

Author:
Ron Hicks

2 years ago

10.9k
Call to action section

Author:
Odessa Young

2 years ago

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

Author:
Oliver Hansen

2 years ago

8.2k
CTA Search Section
CTA search form

Author:
EliteAI Tools

4 months ago

570
Simple call to action

Author:
Laurits

2 years ago

9.4k
CTA card with gradient border

Author:
Sameer Sultana

2 years ago

13k
Component-[callToAction]

Author:
Matti

5 months ago

607
Beautiful CTA w/ large buttons
This CTA card also has a features list

Author:
Carla Hoffman

1 year ago

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

Author:
Pixel Perfect

10 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1