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

Login page
Login and register page, you can reuse both

Author:
Abhiraj

1 year ago

1.8k
Call to action
slightly tilted call to action section

Author:
Simon Scheffer

3 years ago

11.3k
SaaS Feature Section
It has a Gradient text headline and CTA buttons

Author:
Junclarkaizen Pagu

2 years ago

9.4k
asimple game lay out
asimple game lay out

Author:
Bonimater

5 months ago

824
Landing page hero section UI
Modern Hero Section Design

Author:
UI-Templates

4 months ago

525
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

9 months ago

1.1k
SliceHeaven
delivering pizza

Author:
INGRIDE MUZIRANENGE

8 months ago

730
CTA banner
With fading bg gradient

Author:
Lautaro Gómez

1 year ago

1.3k
Simple CTA card

Author:
Santos78

2 years ago

13.6k
Hero section with call to action buttons

Author:
Prashant

3 years ago

15.3k
Responsive About Section with Tailwind CSS
Built a sleek and fully responsive About Section for my portfolio using Tailwind CSS! 🚀 Designed for smooth adaptability across all screen sizes with a modern and minimal aesthetic. Perfect for showcasing skills, experience, and a personal touch!

Author:
Abdul Baset Bappy

10 months ago

1.5k
Minimal CTA section

Author:
Laurits

3 years ago

9.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components