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.3k

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

Call to action section with image

Author:
Emily Tan

3 years ago

12.1k
asimple game lay out
asimple game lay out

Author:
Bonimater

6 months ago

843
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 year ago

1.2k
Animated Gradient Button Component
Button component with smooth hover effects and glass-morphism design. Features expanding gradient animation, rotating icon, and responsive layout. Perfect for call-to-action buttons, landing pages, and web applications. Easy copy-paste Tailwind CSS code ready for integration.

Author:
Homayoun

5 months ago

748
Call to Action (CTA) Section

Author:
ariaw

11 months ago

704
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.8k
asimple game Quest Log
asimple game lay out Quest Log

Author:
Bonimater

5 months ago

573
REGISTER - CTA - SECTION animation

Author:
ABDO-SY

10 months ago

709
ArtoGallery
Explore a curated selection of contemporary and classic artwork, connecting collectors and creators in an inspiring online space.

Author:
ORGIN_DREAMS

9 months ago

1.3k
Boost Your Business with a Stunning Website!
Take your online presence to the next level with a high-performing, visually captivating website. Let’s build something amazing together!

Author:
Vikas Kushwah

11 months ago

905
Jumbotron card

Author:
Sienna

3 years ago

12k
The Future of Web Development
love my product

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

887

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components