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

922

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

Login page
Login and register page, you can reuse both

Author:
Abhiraj

1 year ago

2.2k
Call for action

Author:
Sophia Baker

3 years ago

11.9k
Scooby’s Hello – A Tailwind CSS Cartoon Animation
A playful animation built with Tailwind CSS and minimal custom CSS, featuring a cartoon-style Scooby-inspired dog sliding in from the left, wagging its tail, and cheerfully saying "Hello!"—perfect for adding personality to a fun web project.

Author:
Bonimater

11 months ago

879
Animated Gradient Button Component
Button component with smooth hover effects and glass-morphism design. Features expanding gradient animation, rotating icon, and responsive layout. Perfect for call-to-action buttons, landing pages, and web applications. Easy copy-paste Tailwind CSS code ready for integration.

Author:
Homayoun

7 months ago

876
Animated cards

Author:
Michael Andreuzza

2 years ago

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

Author:
ORGIN_DREAMS

11 months ago

1.3k
CTA block for "Take our survey"
Get users attention to he survey form

Author:
Prajwal Hallale

3 years ago

9.7k
PortfoClean & Colorful Hero Section for Developer Portfolios (Tailwind CSS + Dark Mode)

Author:
SAI BENDE

9 months ago

1k
Marquee animation with tailwind css

Author:
Anonymous

1 year ago

9.3k
Call to action

Author:
Leon Bachmann

3 years ago

9.8k
YouTube subscription section

Author:
Leif99

3 years ago

14.4k
Brutalist Hero

Author:
threehymns

1 year ago

2.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components