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

682

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

9 months ago

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

9 months ago

983
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

3 months ago

220
Ripple Button
Ripple Button is an interactive button component with a ripple animation that responds to user clicks

Author:
Anonymous

2 years ago

13.5k
CTA - call to action section

Author:
ABDO-SY

10 months ago

995
CTA card with gradient border

Author:
Sameer Sultana

2 years ago

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

1 year ago

2k
Amazing 3D Login and Registiration Aniamation Form
create a stunning 3D animated background with floating geometric shapes, particle effects, and interactive elements using React, Three.js, and Tailwind CSS. This will be fully responsive and visually captivating.

Author:
Nicole Shalom

9 months ago

1.1k
Call to action section with image

Author:
Emily Tan

3 years ago

12.1k
chair
by salvator

Author:
Baraka Salvator

9 months ago

1k
Hero section

Author:
Mohit Prajapati

3 years ago

12.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components