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

813

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

2 years ago

11.1k
Call to action section with image

Author:
Steven Kuhn

2 years ago

9.7k
Call ya
Simple Call-to-Action

Author:
Matti

8 months ago

1k
CTA - call to action section

Author:
ABDO-SY

5 months ago

414
Simple search input field

Author:
Santos78

2 years ago

12.5k
Geaux Code CTA Section
CTA with background patterns

Author:
Andrew Weisbeck

1 year ago

1.6k
animated nav
animated nav

Author:
Bonimater

2 months ago

147
Simple Btn animation

Author:
Ranit Saha

8 months ago

1.5k
Drinkware landing page

Author:
Maxim

6 months ago

1.1k
Waitlist signup form

Author:
Anonymous

1 year ago

4.3k
SaaS Feature Section
It has a Gradient text headline and CTA buttons

Author:
Junclarkaizen Pagu

1 year ago

8.9k
Call to action
Call to action section. find it makecomponents.com

Author:
makecomponents

1 year ago

1.8k

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