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

227

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

6 months ago

1.2k
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

2 months ago

397
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

2 months ago

445
Hero section with image

Author:
Sophia Baker

2 years ago

12.3k
YouTube subscription section

Author:
Leif99

2 years ago

14.1k
The Future of Web Development
love my product

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

149
Midnight Lava Lamp
Inspired by Steam's old "Big Picture" ambiance. Based on anonymous/background-animation-2

Author:
Nick Girga

2 months ago

423
Get Started ,Membership section - responsive - darkMode

Author:
ABDO-SY

5 months ago

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

Author:
ORGIN_DREAMS

2 months ago

341
Animated Coming Soon Page 3

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

8 months ago

1.3k
Call to action

Author:
Sophia Baker

2 years ago

10.4k
CTA banner
With fading bg gradient

Author:
Lautaro Gómez

11 months ago

988

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components