Home
ABDO-SY
REGISTER - CTA - SECTION animation

REGISTER - CTA - SECTION animation

This tailwind example is contributed by ABDO-SY, on 14-Apr-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are CTA,banner,Transitions

Call to Action Animation

Author ABDO-SY

680

Fork Fullscreen

<section class="py-20 dark:bg-black h-[600px]">
  <h2 class="mb-10 text-center text-4xl font-bold uppercase sm:text-5xl md:text-8xl dark:text-white">REGISTER NOW</h2>

<div class="mx-auto max-w-7xl overflow-hidden rounded-[50px] p-8 sm:p-14 lg:p-20 dark:bg-[#1c1a1a]">
    <h2 class="text-center text-xl leading-loose font-bold sm:text-start md:text-2xl dark:text-white">Early Bird Pricing Ends In:</h2>

<div class="mx-auto mt-8 w-full sm:w-[700px] lg:w-[900px]">
      <div class="mx-auto flex max-w-md justify-between">
        <span class="min-w-[70px] text-center text-xs font-medium sm:text-sm dark:text-white">DAYS</span>
        <span class="min-w-[70px] text-center text-xs font-medium sm:text-sm dark:text-white">HOURS</span>
        <span class="min-w-[70px] text-center text-xs font-medium sm:text-sm dark:text-white">MINUTES</span>
      </div>

@keyframes typingEffect {
    from {
      height: 0;
      opacity: 0;
    }
    to {
      height: 200px;
      opacity: 1;
    }
  }

.animated-digit::before {
    content: "6";
    animation: digitChange 12s infinite step-end;
  }

@keyframes digitChange {
    0%, 24.999% { content: "6"; }
    25%, 49.999% { content: "7"; }
    50%, 74.999% { content: "8"; }
    75%, 100% { content: "9"; }
  }
</style>

Related Examples

Simple Btn animation

Author:
Ranit Saha

1 year ago

1.8k
E-Commerce Delivery Truck Animation
This responsive CSS animation showcases a delivery bus transporting a package to its destination, created entirely with Tailwind CSS and pure HTML. The animation features

Author:
Bonimater

8 months ago

999
Bug Beach Day Heatwave
This playful animation brings sweltering summer insects to life with pure HTML and Tailwind CSS. Watch as: 🔥 Glowing Fireflies pulse with heat-radiant light, their wings shimmering in the desert sun 🐞 Overheated Ladybugs scuttle across cracked earth, their red shells reflecting the blazing heat ☀️ A Wobbling Sun dominates the sky, emitting pulsing heat waves across the animated landscape

Author:
Bonimater

8 months ago

981
Animated Text Rotator | Smooth Tailwindcss Text Transition Effects
Beautiful animated text rotation component with smooth fade transitions. Perfect for hero sections, showcasing features, and engaging website visitors with dynamic content.

Author:
Homayoun

2 months ago

198
Call to Action with Background image

Author:
Monica D.

1 year ago

2.3k
carde Iptplus
Iptplus carde

Author:
Omer fils ELENGA

2 months ago

228
Modern responsive Newsletter form
Responsive newsletter subscriber form

Author:
Emdadul Islam

1 year ago

2.9k
Button
Button When Hover and page Reload then Button text will show the animation

Author:
Chitranshu

1 year ago

2.6k
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Author:
Abhiraj

1 year ago

2.1k
Animated cards

Author:
Michael Andreuzza

1 year ago

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

Author:
Bonimater

8 months ago

698
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)

8 months ago

580

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components