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

217

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.1k
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

1 month ago

260
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

1 month ago

317
Call to action component
Start your free 7-day trial Call to action button

Author:
S. Patel

2 years ago

7.6k
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Author:
Amit Pachange

1 year ago

4.2k
Plug and Play Animated Button for Hero Statements / Landing Pages
REMOVE the bg-black from the outside <button/> div, if you are already using a black background. Besides this, the button is plug and play! Know errors: You may need to remove animate-spin for your usecase, depending on framework rendering. For SvelteKit, animate-spin is NOT needed. But the [animation:spin_4s]... is always necessary for a smooth effect. Check out my profile to join my community online or add me on LinkedIn.

Author:
Coastal UI

8 months ago

1.4k
Responsive call to action

Author:
Leon Bachmann

2 years ago

8.8k
Responsive Projects Section

Author:
ᴀʀ!ᴀ

3 months ago

338
CTA Search Section
CTA search form

Author:
EliteAI Tools

6 months ago

677
Card animate

Author:
Raul antonio de la cruz hernandez

5 months ago

640
Jumbotron card

Author:
Sienna

2 years ago

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

Author:
ORGIN_DREAMS

1 month ago

183

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components