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

8.9k

6

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

1 year ago

24k
Search bar with filter options

Author:
Piet Vriend

1 year ago

20.5k
Large search bar with icon

Author:
Prajwal Hallale

1 year ago

9.1k
Responsive search bar
with loading animation on submit button

Author:
Ron Hicks

1 year ago

8.2k
Call to action section

Author:
Odessa Young

1 year ago

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

Author:
Oliver Hansen

1 year ago

6.4k
Greeting Card with CTA
card with two actions with greeting msg according to time

Author:
Amit Pachange

8 months ago

5.7k
Waitlist signup form

Author:
Anonymous

4 months ago

1.9k
Clean CTA section

Author:
Pixel Perfect

4 months ago

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

Author:
magersa

4 months ago

1.8k
call-to-action button

Author:
Elijah Davis

1 year ago

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

Author:
Carla Hoffman

3 months ago

494

Explore components by Tags

Didn't find component you were looking for?

Search from 1400+ componenent

TailwindFlex.com

Tailwindflex.com is a free tailwind examples library. It's a one-stop destination for ready-made tailwind examples.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components

© 2024 TailwindFlex. All Rights Reserved.

v1.6