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

1.1k

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

Brutalist Hero

Author:
threehymns

11 months ago

2.3k
call-to-action button

Author:
Elijah Davis

2 years ago

9.1k
Call to action block

Author:
Sienna

2 years ago

11.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.7k
Floating Action Button
This component displays a fixed, floating contact button panel positioned at the bottom-right corner of the screen. It provides users with quick access to key communication channels including WhatsApp, Email, and Instagram. Each icon is styled with vibrant, platform-specific colors and includes subtle hover animations for an interactive user experience. Ideal for improving accessibility and encouraging user engagement, especially on mobile devices.

Author:
Arturo Lizana

7 months ago

1.1k
Get it on Google play / App store section

Author:
Rajesh kulkarni

2 years ago

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

Author:
Curtis Bickler

1 year ago

1.9k
Clean CTA section

Author:
Pixel Perfect

1 year ago

3.7k
Blog post card
Responsive blog post or article card. This card can also be used as a CTA

Author:
Anonymous

2 years ago

10.2k
Greeting Card with CTA
card with two actions with greeting msg according to time

Author:
Amit Pachange

2 years ago

7.7k
CTA banner
With fading bg gradient

Author:
Lautaro Gómez

1 year ago

1.2k
Responsive call to action

Author:
Leon Bachmann

2 years ago

9.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components