CTA section with floating icos as background

This tailwind example is contributed by EliteAI Tools, on 06-Jan-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are CTA,banner

Call to Action

Author EliteAI Tools

Tailwind v3.4 1.7k 3

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

Leon Bachmann

3 years ago

9.4k
Get the app section
Play store and App store buttons

Sophia Baker

3 years ago

10.1k
asimple game Quest Log
asimple game lay out Quest Log

Bonimater

1 year ago

1k
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!

Vikas Kushwah

1 year ago

1.3k
Tailwind CSS Button (Wavy Button)
The button uses Tailwind classes for size, background, border, border-radius, shadow, cursor, overflow, and transitions. The wave overlay is absolutely positioned at the bottom of the button, initially off-screen (top-full) and moves to the middle (top-1/2) on hover via the custom .wave class and keyframes. The font-poppins class isn’t a default Tailwind class. You should define it in your Tailwind configuration or replace it with font-sans if you haven't extended fonts.

KULDEEP

1 year ago

1.3k
E-Commerce Delivery Truck Animation
This responsive CSS animation showcases a delivery bus transporting a package to its destination, created entirely with Tailwind CSS and pure HTML. The animation features

Bonimater

1 year ago

1.5k
CTA section with light beam from bottom effect
It also has support for dark mode

Pixel Perfect

2 years ago

2.5k
Call to action section with image

Steven Kuhn

3 years ago

10.9k
Landing page hero section UI
Modern Hero Section Design

UI-Templates

11 months ago

1.4k
Tailwind CTA section

Moriba Traore

3 years ago

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

TailwindFlex

2 years ago

8.5k
Responsive call to action

Leon Bachmann

3 years ago

10.1k