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

11.1k

9

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

32k
Search bar with filter options

Author:
Piet Vriend

2 years ago

24.9k
Large search bar with icon

Author:
Prajwal Hallale

3 years ago

10.3k
Call to action section

Author:
Odessa Young

2 years ago

12.1k
Responsive search bar
with loading animation on submit button

Author:
Ron Hicks

2 years ago

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

Author:
Oliver Hansen

2 years ago

8.6k
CTA Search Section
CTA search form

Author:
EliteAI Tools

8 months ago

812
Animated Search Input
Expand on focus with smooth animation

Author:
Anonymous

11 months ago

2.1k
CTA block for "Take our survey"
Get users attention to he survey form

Author:
Prajwal Hallale

2 years ago

9.6k
Call to action component
Start your free 7-day trial Call to action button

Author:
S. Patel

2 years ago

7.7k
Call to action
CTA

Author:
inbarajan P

1 year ago

1.4k
Clone of Google’s Search Functionality
This Tailwind CSS example, contributed by Bishnu Thapa on April 4th, 2024, showcases a responsive component designed using version 3.4 of Tailwind CSS. It is responsive.

Author:
Bishnu Thapa

1 year ago

2.6k

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