Countdown gives you a transition effect when you change a number between 0 to 99.
Class name | Type | |
---|---|---|
countdown | Component | Countdown wrapper |
you need to change the span text and the
--value
CSS variable using JS. Value must be a number between 0 and 99.
<span class="$$countdown"> <span style="--$$value:59;">59</span> </span>
<span class="$$countdown">
<span style="--$$value:59;">59</span>
</span>
{/* For TSX uncomment the commented types below */} <span class="$$countdown"> <span style={{"--$$value":59} /* as React.CSSProperties */ }>59</span> </span>
{/* For TSX uncomment the commented types below */}
<span class="$$countdown">
<span style={{"--$$value":59} /* as React.CSSProperties */ }>59</span>
</span>
<span class="$$countdown font-mono text-6xl"> <span style="--$$value:59;">59</span> </span>
<span class="$$countdown font-mono text-6xl">
<span style="--$$value:59;">59</span>
</span>
{/* For TSX uncomment the commented types below */} <span class="$$countdown font-mono text-6xl"> <span style={{"--$$value":59} /* as React.CSSProperties */ }>59</span> </span>
{/* For TSX uncomment the commented types below */}
<span class="$$countdown font-mono text-6xl">
<span style={{"--$$value":59} /* as React.CSSProperties */ }>59</span>
</span>
<span class="$$countdown font-mono text-2xl"> <span style="--$$value:10;">10</span> h <span style="--$$value:24;">24</span> m <span style="--$$value:59;">59</span> s </span>
<span class="$$countdown font-mono text-2xl">
<span style="--$$value:10;">10</span>
h
<span style="--$$value:24;">24</span>
m
<span style="--$$value:59;">59</span>
s
</span>
{/* For TSX uncomment the commented types below */} <span class="$$countdown font-mono text-2xl"> <span style={{"--$$value":10} /* as React.CSSProperties */ }>10</span>h <span style={{"--$$value":24} /* as React.CSSProperties */ }>24</span>m <span style={{"--$$value":59} /* as React.CSSProperties */ }>59</span>s </span>
{/* For TSX uncomment the commented types below */}
<span class="$$countdown font-mono text-2xl">
<span style={{"--$$value":10} /* as React.CSSProperties */ }>10</span>h
<span style={{"--$$value":24} /* as React.CSSProperties */ }>24</span>m
<span style={{"--$$value":59} /* as React.CSSProperties */ }>59</span>s
</span>
<span class="$$countdown font-mono text-2xl"> <span style="--$$value:10;">10</span> : <span style="--$$value:24;">24</span> : <span style="--$$value:59;">59</span> </span>
<span class="$$countdown font-mono text-2xl">
<span style="--$$value:10;">10</span>
:
<span style="--$$value:24;">24</span>
:
<span style="--$$value:59;">59</span>
</span>
{/* For TSX uncomment the commented types below */} <span class="$$countdown font-mono text-2xl"> <span style={{"--$$value":10} /* as React.CSSProperties */ }>10</span>: <span style={{"--$$value":24} /* as React.CSSProperties */ }>24</span>: <span style={{"--$$value":59} /* as React.CSSProperties */ }>59</span> </span>
{/* For TSX uncomment the commented types below */}
<span class="$$countdown font-mono text-2xl">
<span style={{"--$$value":10} /* as React.CSSProperties */ }>10</span>:
<span style={{"--$$value":24} /* as React.CSSProperties */ }>24</span>:
<span style={{"--$$value":59} /* as React.CSSProperties */ }>59</span>
</span>
<div class="flex gap-5"> <div> <span class="$$countdown font-mono text-4xl"> <span style="--$$value:15;">15</span> </span> days </div> <div> <span class="$$countdown font-mono text-4xl"> <span style="--$$value:10;">10</span> </span> hours </div> <div> <span class="$$countdown font-mono text-4xl"> <span style="--$$value:24;">24</span> </span> min </div> <div> <span class="$$countdown font-mono text-4xl"> <span style="--$$value:59;">59</span> </span> sec </div> </div>
<div class="flex gap-5">
<div>
<span class="$$countdown font-mono text-4xl">
<span style="--$$value:15;">15</span>
</span>
days
</div>
<div>
<span class="$$countdown font-mono text-4xl">
<span style="--$$value:10;">10</span>
</span>
hours
</div>
<div>
<span class="$$countdown font-mono text-4xl">
<span style="--$$value:24;">24</span>
</span>
min
</div>
<div>
<span class="$$countdown font-mono text-4xl">
<span style="--$$value:59;">59</span>
</span>
sec
</div>
</div>
{/* For TSX uncomment the commented types below */} <div class="flex gap-5"> <div> <span class="$$countdown font-mono text-4xl"> <span style={{"--$$value":15} /* as React.CSSProperties */ }>15</span> </span> days </div> <div> <span class="$$countdown font-mono text-4xl"> <span style={{"--$$value":10} /* as React.CSSProperties */ }>10</span> </span> hours </div> <div> <span class="$$countdown font-mono text-4xl"> <span style={{"--$$value":24} /* as React.CSSProperties */ }>24</span> </span> min </div> <div> <span class="$$countdown font-mono text-4xl"> <span style={{"--$$value":59} /* as React.CSSProperties */ }>59</span> </span> sec </div> </div>
{/* For TSX uncomment the commented types below */}
<div class="flex gap-5">
<div>
<span class="$$countdown font-mono text-4xl">
<span style={{"--$$value":15} /* as React.CSSProperties */ }>15</span>
</span>
days
</div>
<div>
<span class="$$countdown font-mono text-4xl">
<span style={{"--$$value":10} /* as React.CSSProperties */ }>10</span>
</span>
hours
</div>
<div>
<span class="$$countdown font-mono text-4xl">
<span style={{"--$$value":24} /* as React.CSSProperties */ }>24</span>
</span>
min
</div>
<div>
<span class="$$countdown font-mono text-4xl">
<span style={{"--$$value":59} /* as React.CSSProperties */ }>59</span>
</span>
sec
</div>
</div>
<div class="grid auto-cols-max grid-flow-col gap-5 text-center"> <div class="flex flex-col"> <span class="$$countdown font-mono text-5xl"> <span style="--$$value:15;">15</span> </span> days </div> <div class="flex flex-col"> <span class="$$countdown font-mono text-5xl"> <span style="--$$value:10;">10</span> </span> hours </div> <div class="flex flex-col"> <span class="$$countdown font-mono text-5xl"> <span style="--$$value:24;">24</span> </span> min </div> <div class="flex flex-col"> <span class="$$countdown font-mono text-5xl"> <span style="--$$value:59;">59</span> </span> sec </div> </div>
<div class="grid auto-cols-max grid-flow-col gap-5 text-center">
<div class="flex flex-col">
<span class="$$countdown font-mono text-5xl">
<span style="--$$value:15;">15</span>
</span>
days
</div>
<div class="flex flex-col">
<span class="$$countdown font-mono text-5xl">
<span style="--$$value:10;">10</span>
</span>
hours
</div>
<div class="flex flex-col">
<span class="$$countdown font-mono text-5xl">
<span style="--$$value:24;">24</span>
</span>
min
</div>
<div class="flex flex-col">
<span class="$$countdown font-mono text-5xl">
<span style="--$$value:59;">59</span>
</span>
sec
</div>
</div>
{/* For TSX uncomment the commented types below */} <div class="grid grid-flow-col gap-5 text-center auto-cols-max"> <div class="flex flex-col"> <span class="$$countdown font-mono text-5xl"> <span style={{"--$$value":15} /* as React.CSSProperties */ }>15</span> </span> days </div> <div class="flex flex-col"> <span class="$$countdown font-mono text-5xl"> <span style={{"--$$value":10} /* as React.CSSProperties */ }>10</span> </span> hours </div> <div class="flex flex-col"> <span class="$$countdown font-mono text-5xl"> <span style={{"--$$value":24} /* as React.CSSProperties */ }>24</span> </span> min </div> <div class="flex flex-col"> <span class="$$countdown font-mono text-5xl"> <span style={{"--$$value":59} /* as React.CSSProperties */ }>59</span> </span> sec </div> </div>
{/* For TSX uncomment the commented types below */}
<div class="grid grid-flow-col gap-5 text-center auto-cols-max">
<div class="flex flex-col">
<span class="$$countdown font-mono text-5xl">
<span style={{"--$$value":15} /* as React.CSSProperties */ }>15</span>
</span>
days
</div>
<div class="flex flex-col">
<span class="$$countdown font-mono text-5xl">
<span style={{"--$$value":10} /* as React.CSSProperties */ }>10</span>
</span>
hours
</div>
<div class="flex flex-col">
<span class="$$countdown font-mono text-5xl">
<span style={{"--$$value":24} /* as React.CSSProperties */ }>24</span>
</span>
min
</div>
<div class="flex flex-col">
<span class="$$countdown font-mono text-5xl">
<span style={{"--$$value":59} /* as React.CSSProperties */ }>59</span>
</span>
sec
</div>
</div>
<div class="grid auto-cols-max grid-flow-col gap-5 text-center"> <div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2"> <span class="$$countdown font-mono text-5xl"> <span style="--$$value:15;">15</span> </span> days </div> <div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2"> <span class="$$countdown font-mono text-5xl"> <span style="--$$value:10;">10</span> </span> hours </div> <div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2"> <span class="$$countdown font-mono text-5xl"> <span style="--$$value:24;">24</span> </span> min </div> <div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2"> <span class="$$countdown font-mono text-5xl"> <span style="--$$value:59;">59</span> </span> sec </div> </div>
<div class="grid auto-cols-max grid-flow-col gap-5 text-center">
<div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2">
<span class="$$countdown font-mono text-5xl">
<span style="--$$value:15;">15</span>
</span>
days
</div>
<div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2">
<span class="$$countdown font-mono text-5xl">
<span style="--$$value:10;">10</span>
</span>
hours
</div>
<div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2">
<span class="$$countdown font-mono text-5xl">
<span style="--$$value:24;">24</span>
</span>
min
</div>
<div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2">
<span class="$$countdown font-mono text-5xl">
<span style="--$$value:59;">59</span>
</span>
sec
</div>
</div>
{/* For TSX uncomment the commented types below */} <div class="grid grid-flow-col gap-5 text-center auto-cols-max"> <div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content"> <span class="$$countdown font-mono text-5xl"> <span style={{"--$$value":15} /* as React.CSSProperties */ }>15</span> </span> days </div> <div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content"> <span class="$$countdown font-mono text-5xl"> <span style={{"--$$value":10} /* as React.CSSProperties */ }>10</span> </span> hours </div> <div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content"> <span class="$$countdown font-mono text-5xl"> <span style={{"--$$value":24} /* as React.CSSProperties */ }>24</span> </span> min </div> <div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content"> <span class="$$countdown font-mono text-5xl"> <span style={{"--$$value":59} /* as React.CSSProperties */ }>59</span> </span> sec </div> </div>
{/* For TSX uncomment the commented types below */}
<div class="grid grid-flow-col gap-5 text-center auto-cols-max">
<div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
<span class="$$countdown font-mono text-5xl">
<span style={{"--$$value":15} /* as React.CSSProperties */ }>15</span>
</span>
days
</div>
<div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
<span class="$$countdown font-mono text-5xl">
<span style={{"--$$value":10} /* as React.CSSProperties */ }>10</span>
</span>
hours
</div>
<div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
<span class="$$countdown font-mono text-5xl">
<span style={{"--$$value":24} /* as React.CSSProperties */ }>24</span>
</span>
min
</div>
<div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
<span class="$$countdown font-mono text-5xl">
<span style={{"--$$value":59} /* as React.CSSProperties */ }>59</span>
</span>
sec
</div>
</div>