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

10

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

2 years ago

10.1k
Search input

Author:
Leon Bachmann

1 year ago

9.7k
search button

Author:
Freja Jensen

1 year ago

11.4k
Simple call to action

Author:
Laurits

1 year ago

8.8k
Get the app section
Play store and App store buttons

Author:
Sophia Baker

1 year ago

8k
Call to action

Author:
Leon Bachmann

2 years ago

8.4k
Basic CTA card

Author:
kishan pc

8 months ago

1.5k
Search box
Search bar with a button inside

Author:
Anonymous

10 months ago

2.3k
Jumbotron card

Author:
Sienna

2 years ago

10.2k
Full width search section with title

Author:
TailwindFlex

2 years ago

10.8k
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

2 months ago

341
Product Page
Showcase for the product.

Author:
muhamadrofii911

5 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

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

© 2025 TailwindFlex. All Rights Reserved.

v1.1