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 v3.4. It is responsive. It supports dark mode. similar terms for this example are CTA,banner

Call to Action

Author Homayoun

Tailwind v3.4 761 4

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

Subscribe to our newsletter section

Conan Hilton

4 years ago

12k
Clean CTA section

Pixel Perfect

2 years ago

4.1k
Promotion Block
It features a large, centered title, a brief description, and a prominent CTA button, all centered within a visually appealing layout.

Computer guy

3 years ago

8.4k
Hero section

Mohit Prajapati

4 years ago

12.9k
Free Animated Gradient Glow Button with Tailwind CSS
A modern, responsive Tailwind CSS button with glowing gradient hover effects, smooth animations, and an integrated SVG icon. Perfect for landing pages, call-to-action buttons, or any stylish UI project. Fully customizable and open source , ready to copy, paste, and use in your projects.

Homayoun

1 year ago

1.1k
Landing page

Maxim

1 year ago

2.8k
Call to Action section for home page

Sophia Baker

3 years ago

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

Junclarkaizen Pagu

3 years ago

10.2k
Applications Showcase
This is a stylish and interactive application showcase component designed for web use. It features the following elements: Background Styling: The main container has a rounded-rectangle shape (rounded-3xl) with a subtle white base overlaying a high-resolution background image, styled with background-size: 600px for an artistic touch. The image itself dynamically serves as a backdrop, giving the component a layered appearance. Main Icon: A small circular icon, located at the top-right corner, appears with smooth hover effects: Enlarges to double its size (scale-[2]). Rotates (rotate-[410deg]). Moves diagonally upwards-right (translate-x-3, -translate-y-3). These transitions occur over a duration of 1 second (transition duration-1000). Overlay Gradient: A transparent gradient overlay (bg-gradient-to-l) adds a polished depth effect, transitioning from black (from-black/80) to lighter shades. App Icon and Info: Icon: The app icon is a smaller, bordered square image (rounded-2xl) with hover shrink animations (group-hover:scale-95). Text: A bold application title (text-md font-semibold) with hover-animated underline effects that gradually expand from left to right. A short app description styled as secondary text. Call-to-Action Button: Below the card is a subtle, rounded button (rounded-full) encouraging interaction. It features: A hover effect with color inversion (gray to black). A lift effect (hover:-translate-y-1) when hovered. This component is perfect for modern app showcases, offering a dynamic, user-friendly visual experience. It ensures a professional look while engaging users through smooth animations and clear calls to action.

Banshee

1 year ago

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

Abdul Baset Bappy

1 year ago

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

Bonimater

1 year ago

1.1k
Get Started ,Membership section - responsive - darkMode

ABDO-SY

1 year ago

1.5k