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
Search bar with icon

Author:
Steven Kuhn

3 years ago

15.4k
Hero Section
Full width hero section for landing pages

Author:
Manon Daniel

3 years ago

13.9k
asimple game lay out
asimple game lay out

Author:
Bonimater

6 months ago

899
Simple Btn animation

Author:
Ranit Saha

1 year ago

1.9k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

1 year ago

3.7k
Responsive call to action

Author:
Leon Bachmann

3 years ago

9.5k
Responsive search bar
with loading animation on submit button

Author:
Ron Hicks

3 years ago

12k
Call to Action (for app stores)
Download app section with Playstore and Appstore button

Author:
Ron Hicks

3 years ago

11.7k
Full width search section with title

Author:
TailwindFlex

3 years ago

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

Author:
Prajwal Hallale

2 years ago

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

Author:
Diego Chavez

2 years ago

8.6k

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