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

289

1

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.3k
Product Page
Showcase for the product.

Author:
Prem..

2 years ago

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

Author:
Oliver Hansen

2 years ago

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

Author:
magersa

1 year ago

3.5k
CTA card with gradient border

Author:
Sameer Sultana

1 year ago

12.5k
Responsive call to action

Author:
Leon Bachmann

2 years ago

8.3k
Tilted button on hover.
A simple button with a gradient and tilt on hover. Dark mode supported with same color.

Author:
András Szehofner

1 month ago

122
Minimal CTA section

Author:
Laurits

2 years ago

8.4k
Full width search section with title

Author:
TailwindFlex

2 years ago

11k
Basic CTA
Simple and straightforward call to action section

Author:
Dipti narayan

1 year ago

7.1k
Component-[callToAction]

Author:
Matti

3 months ago

531
Large search bar with icon

Author:
Prajwal Hallale

2 years ago

10.1k

Explore components by Tags

Didn't find component you were looking for?

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