Home
EliteAI Tools
CTA Search Section

CTA Search Section

CTA search form

This tailwind example is contributed by EliteAI Tools, on 06-Jan-2025. 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 EliteAI Tools

1.3k

5

Fork Fullscreen

<div class="relative px-6 py-20 mx-auto overflow-hidden text-center isolate sm:px-16 max-w-7xl lg:px-8">
  <p class="max-w-2xl mx-auto text-xl text-gray-600">
    Didn't find tool you were looking for?
  </p>

<form action="https://eliteai.tools/search"
    class="relative flex flex-col items-center justify-center max-w-2xl gap-2 px-2 py-2 mx-auto mt-4 bg-white border rounded shadow-2xl min-w-sm md:flex-row focus-within:border-gray-300">
    <input id="search-bar" placeholder="e.g Tool for Creating Powerpoint Presentation" name="q"
      class="flex-1 w-full px-6 py-2 bg-white rounded outline-none" required="">
    <button type="submit"
      class="relative w-full px-6 py-2 overflow-hidden text-white transition-all duration-100 bg-black border border-black rounded md:w-auto fill-white active:scale-95 will-change-transform">
      <span class="flex items-center transition-all opacity-1">

<span class="mx-auto text-sm font-semibold truncate whitespace-nowrap">
          Search
        </span>
      </span>
    </button>
    <span class="absolute text-sm text-gray-600 right-1 -bottom-7">
      Be as detailed as possible for better results
    </span>
  </form>

<svg viewBox="0 0 1024 1024"
    class="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-x-1/2 [mask-image:radial-gradient(closest-side,white,transparent)]"
    aria-hidden="true">
    <circle cx="512" cy="512" r="512" fill="url(#827591b1-ce8c-4110-b064-7cb85a0b1217)" fill-opacity="0.7">
    </circle>
    <defs>
      <radialGradient id="827591b1-ce8c-4110-b064-7cb85a0b1217">
        <stop stop-color="#3b82f6"></stop>
        <stop offset="1" stop-color="#1d4ed8"></stop>
      </radialGradient>
    </defs>
  </svg>
</div>

Related Examples

Call to action
slightly tilted call to action section

Author:
Simon Scheffer

3 years ago

11.3k
Join Our Community Banner
Encourage users to become members of a community.

Author:
Diego Chavez

2 years ago

8.6k
Highlighted Important section with button

Author:
Amit Pachange

3 years ago

9.9k
Product review card

Author:
Moriba Traore

3 years ago

15.4k
CTA block
with user avatars and 2 buttons

Author:
Carla Hoffman

1 year ago

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

Author:
Carla Hoffman

1 year ago

2.5k
Simple Btn animation

Author:
Ranit Saha

1 year ago

1.8k
Survey CTA

Author:
JaxStone

3 years ago

14.2k
The Future of Web Development
love my product

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

886
Call to Action (CTA with Background Image)
A Call to Action (CTA) is an essential element in marketing and web design that prompts users to take a specific desired action. When combined with a compelling background image, it can significantly enhance user engagement and conversion rates.

Author:
Eliyanto Sarage

1 year ago

2.8k
Get it on Google play / App store section

Author:
Rajesh kulkarni

3 years ago

10.3k
Arama Sonuçları Sayfası
Sayfa içerik türüne göre icon ile desteklenen arama formu ve arama sonuçları sayfası

Author:
Sedat Kumcu

1 year ago

2.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ 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

© 2026 TailwindFlex. All Rights Reserved.

v1.12