Home
Homayoun
Animated Call-to-Action Section

Animated Call-to-Action Section

Enhance your website with this , animated CTA section. Includes a gradient text animations, and a stylish avatar group. Easily customizable and designed to improve user engagement. Get the source code now.

This tailwind example is contributed by Homayoun, on 03-Oct-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are CTA,banner

Call to Action

Author Homayoun

137

Fork Fullscreen

<div class="animate-fade-in-up animation-delay-400">
      <h1 class="text-5xl sm:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight">
        <span
          class="block bg-gradient-to-r from-gray-900 via-purple-500 to-blue-500 bg-clip-text text-transparent dark:from-gray-100 dark:via-purple-400 dark:to-blue-300 animate-gradient-x"
        >
          Lorem ipsum dolor
        </span>
        <span class="block relative mt-2">
          <span
            class="bg-gradient-to-r from-purple-400 via-pink-400 to-blue-400 bg-clip-text text-transparent animate-gradient-x dark:from-purple-300 dark:via-pink-300 dark:to-blue-300"
          >
            sit amet
          </span>
        <span class="relative inline-block ml-4">
            <svg
              class="absolute bottom-2 left-0 w-full h-4 text-purple-400 dark:text-purple-300 animate-draw-line"
              viewBox="0 0 410 18"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M6 6.4c16.8 16.8 380.8-11.2 397.6 5.602"
                stroke="currentColor"
                strokeWidth="3"
                fill="none"
                strokeLinecap="round"
                class="animate-dash"
              />
            </svg>
            <span
              class="relative bg-gradient-to-r from-purple-400 to-blue-400 dark:from-purple-300 dark:to-blue-300 bg-clip-text text-transparent"
            >
              consectetur
            </span>
        </span>
        </span>
      </h1>
    </div>

<div class="animate-fade-in-up animation-delay-600">
      <p class="max-w-4xl mx-auto text-xl sm:text-2xl leading-relaxed text-gray-700 dark:text-gray-300">
        <span class="inline-block animate-typewriter">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </span>
      </p>
    </div>

<div class="pt-6 animate-fade-in-up animation-delay-1000">
      <div
        class="flex flex-wrap sm:flex-nowrap flex-row items-center justify-center gap-8 text-sm text-gray-700 dark:text-gray-300">
        <div class="flex items-center gap-2">
          <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
          <span>Lorem ipsum dolor</span>
        </div>
        <div class="flex items-center gap-2">
          <div class="w-2 h-2 bg-blue-400 rounded-full animate-pulse animation-delay-300"></div>
          <span>Consectetur adipiscing</span>
        </div>
        <div class="flex items-center gap-2">
          <div class="w-2 h-2 bg-purple-400 rounded-full animate-pulse animation-delay-600"></div>
          <span>Sed do eiusmod</span>
        </div>
      </div>
    </div>
  </div>
</section>

Related Examples

CTA block
with user avatars and 2 buttons

Author:
Carla Hoffman

1 year ago

2.3k
Hero section with image

Author:
Sophia Baker

2 years ago

12.9k
Hero Section
Full width hero section for landing pages

Author:
Manon Daniel

3 years ago

13.6k
Call to action card with image
Responsive card with image

Author:
Noah Schmidt

2 years ago

16.1k
Domain For Sale Template
Domain For Sale Template

Author:
Geoffrey Callaghan

1 year ago

4k
an off line game of catching afox
an off line game of catching afox

Author:
Bonimater

5 months ago

355
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

5 months ago

589
Acode master
Welcome to Hamza's official portfolio — a creative developer blending modern design with powerful code. Explore animations, projects, and innovations crafted with HTML, Tailwind CSS, and passion.

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

541
Call to Action (CTA) Section

Author:
ariaw

7 months ago

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

Author:
ORGIN_DREAMS

6 months ago

959
Clean CTA

Author:
Kofi Osei

2 years ago

11.5k
Call to action component
Start your free 7-day trial Call to action button

Author:
S. Patel

2 years ago

7.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components