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

303

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