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

435

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

asimple game Quest Log
asimple game lay out Quest Log

Author:
Bonimater

6 months ago

574
CTA banner
Capture the attention of the user with full-width CTA Section

Author:
Anonymous

2 years ago

4.7k
Call to Action (for app stores)
Download app section with Playstore and Appstore button

Author:
Ron Hicks

3 years ago

11.8k
Simple Btn animation

Author:
Ranit Saha

1 year ago

1.9k
Call to action

Author:
Leon Bachmann

3 years ago

8.9k
Waitlist signup form

Author:
Anonymous

2 years ago

5k
Get Started ,Membership section - responsive - darkMode

Author:
ABDO-SY

1 year ago

1.1k
Landing page

Author:
Maxim

11 months ago

2k
Product review card

Author:
Rama krishnan Subramanian

1 year ago

2.3k
stepper
The Stepper Component is a versatile and user-friendly tool designed to guide users through a sequence of steps. Whether you're building a multi-step form, a tutorial, or any process that requires sequential navigation, this component makes it easy to implement and customize.

Author:
Abhiraj

1 year ago

2.1k
CTA card with gradient background
Grab users attention using this eye catching CTA card

Author:
Emre Yılmaz

2 years ago

4k
Beautiful CTA w/ large buttons
This CTA card also has a features list

Author:
Carla Hoffman

2 years ago

2.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components