Home
EliteAI Tools
CTA section with floating icos as background

CTA section with floating icos as background

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

Call to Action

Author EliteAI Tools

Fork Fullscreen

<div class="max-w-4xl px-4 py-24 mx-auto sm:px-6 lg:px-8">
  <div class="relative overflow-hidden bg-white shadow-2xl rounded-3xl">
    <div class="relative z-10 p-8 text-center md:p-16 lg:p-20">
      <h2 class="mb-4 text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl">
        Own an AI Tool?
      </h2>
      <p class="max-w-2xl mx-auto mb-8 text-lg text-gray-600">
        Join our curated collection of AI tools and reach thousands of potential users
      </p>
      <a href="https://eliteai.tools/tool/submit-new-tool"
        class="inline-block px-8 py-4 text-lg font-semibold text-white transition-all duration-200 bg-indigo-600 rounded-xl hover:bg-indigo-700 hover:shadow-lg transform hover:-translate-y-0.5">
        Submit Your Tool
      </a>
    </div>

<div class="absolute inset-0 overflow-hidden pointer-events-none">
      <img
        class="absolute w-16 h-16 transition-all duration-1000 animate-float opacity-40 hover:opacity-100"
        style="animation-delay: 0.2s; top: 5%; left: 5%;"
        src="https://eliteai.tools/images/home/1.svg"
        alt="AI Icon"
      />
      <img
        class="absolute w-16 h-16 transition-all duration-1000 animate-float opacity-40 hover:opacity-100"
        style="animation-delay: 0.6s; top: 5%; right: 5%;"
        src="https://eliteai.tools/images/home/3.svg"
        alt="AI Icon"
      />
      <img
        class="absolute w-16 h-16 transition-all duration-1000 animate-float opacity-40 hover:opacity-100"
        style="animation-delay: 0.8s; top: 45%; left: 15%;"
        src="https://eliteai.tools/images/home/5.svg"
        alt="AI Icon"
      />
      <img
        class="absolute w-16 h-16 transition-all duration-1000 animate-float opacity-40 hover:opacity-100"
        style="animation-delay: 1.2s; top: 45%; right: 15%;"
        src="https://eliteai.tools/images/home/10.svg"
        alt="AI Icon"
      />
      <img
        class="absolute w-16 h-16 transition-all duration-1000 animate-float opacity-40 hover:opacity-100"
        style="animation-delay: 1.4s; top: 85%; left: 5%;"
        src="https://eliteai.tools/images/home/4.svg"
        alt="AI Icon"
      />
      <img
        class="absolute w-16 h-16 transition-all duration-1000 animate-float opacity-40 hover:opacity-100"
        style="animation-delay: 1.8s; top: 85%; right: 5%;"
        src="https://eliteai.tools/images/home/8.svg"
        alt="AI Icon"
      />
      <img
        class="absolute w-16 h-16 transition-all duration-1000 animate-float opacity-40 hover:opacity-100 hidden md:block"
        style="animation-delay: 2.0s; top: 25%; left: 30%;"
        src="https://eliteai.tools/images/home/9.svg"
        alt="AI Icon"
      />
      <img
        class="absolute w-16 h-16 transition-all duration-1000 animate-float opacity-40 hover:opacity-100 hidden md:block"
        style="animation-delay: 2.2s; top: 65%; right: 30%;"
        src="https://eliteai.tools/images/home/7.svg"
        alt="AI Icon"
      />
    </div>
  </div>
</div>

Related Examples

Geaux Code CTA Section
CTA with background patterns

Author:
Andrew Weisbeck

1 year ago

1.7k
Newsletter Signup Form
It features a clean and modern design with a background illustration, making it visually appealing.

Author:
TailwindFlex

1 year ago

7.7k
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.5k
Free Responsive Hero Section
Get this professional hero section for your website. Includes a gradient text effect, stylish background blurs, and a perfectly aligned image section. Easy to integrate and fully customizable for any project.

Author:
Homayoun

1 week ago

37
Banner for app download
Show App Download Buttons for the App Store and Play Store

Author:
Pixel Perfect

1 year ago

1.5k
Product Page
Showcase for the product.

Author:
Prem..

3 years ago

31.3k
Call-to-Action Card
Early Access Signup Card

Author:
Santiago Hernandez

1 year ago

1.7k
Contact Us Form
CTAs help convert visitors into action-takers (customers, subscribers, etc.), while Contact Us forms enable easy communication, building trust and support. Both are vital for engaging visitors and achieving your website’s objectives.

Author:
KULDEEP

3 months ago

439
CTA Responsive
Gradient Style CTA

Author:
KULDEEP

2 months ago

250
Product hunt showcase section

Author:
Leon Bachmann

2 years ago

10k
Modern Dark Footer with Overlapping Gradient CTA
A comprehensive, dark-themed website footer component built with HTML and Tailwind CSS. It features a visually distinct overlapping section with a colorful gradient background containing a prominent call-to-action (CTA) block. The main footer area utilizes a multi-column grid layout for organized navigation links, a newsletter signup form, and social media icons. A final bottom bar includes legal links and copyright information. The design is responsive and adapts its layout for different screen sizes.

Author:
Hamza Atig

5 months ago

626
Highlighted Important section with button

Author:
Amit Pachange

2 years ago

9.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components