import CodeRender from '../../CodeRender'

### Countdown

<CodeRender code={`
<span class="countdown"><span style="--value: 59"></span></span>

`} />
  
```html
<span class="countdown"><span style="--value: 59"></span></span>

```
### Large text

<CodeRender code={`
<span class="countdown font-mono text-6xl"><span style="--value: 59"></span></span>

`} />
  
```html
<span class="countdown font-mono text-6xl"><span style="--value: 59"></span></span>

```
### Clock countdown

<CodeRender code={`
<span class="font-mono text-2xl countdown">
  <span style="--value: 10"></span>
  h
  <span style="--value: 24"></span>
  m
  <span style="--value: 59"></span>
  s
</span>

`} />
  
```html
<span class="font-mono text-2xl countdown">
  <span style="--value: 10"></span>
  h
  <span style="--value: 24"></span>
  m
  <span style="--value: 59"></span>
  s
</span>

```
### Clock countdown with colons

<CodeRender code={`
<span class="font-mono text-2xl countdown">
  <span style="--value: 10"></span>
  :
  <span style="--value: 24"></span>
  :
  <span style="--value: 59"></span>
</span>

`} />
  
```html
<span class="font-mono text-2xl countdown">
  <span style="--value: 10"></span>
  :
  <span style="--value: 24"></span>
  :
  <span style="--value: 59"></span>
</span>

```
### Large text with labels

<CodeRender code={`
<div class="flex gap-5">
  <div>
    <span class="font-mono text-4xl countdown"><span style="--value: 15"></span></span>
    days
  </div>
  <div>
    <span class="font-mono text-4xl countdown"><span style="--value: 10"></span></span>
    hours
  </div>
  <div>
    <span class="font-mono text-4xl countdown"><span style="--value: 24"></span></span>
    minutes
  </div>
  <div>
    <span class="font-mono text-4xl countdown"><span style="--value: 59"></span></span>
    sec
  </div>
</div>

`} />
  
```html
<div class="flex gap-5">
  <div>
    <span class="font-mono text-4xl countdown"><span style="--value: 15"></span></span>
    days
  </div>
  <div>
    <span class="font-mono text-4xl countdown"><span style="--value: 10"></span></span>
    hours
  </div>
  <div>
    <span class="font-mono text-4xl countdown"><span style="--value: 24"></span></span>
    minutes
  </div>
  <div>
    <span class="font-mono text-4xl countdown"><span style="--value: 59"></span></span>
    sec
  </div>
</div>

```
### Large text with labels under

<CodeRender code={`
<div class="grid grid-flow-col gap-5 text-center auto-cols-max">
  <div class="flex flex-col">
    <span class="font-mono text-5xl countdown"><span style="--value: 15"></span></span>
    days
  </div>
  <div class="flex flex-col">
    <span class="font-mono text-5xl countdown"><span style="--value: 10"></span></span>
    hours
  </div>
  <div class="flex flex-col">
    <span class="font-mono text-5xl countdown"><span style="--value: 24"></span></span>
    min
  </div>
  <div class="flex flex-col">
    <span class="font-mono text-5xl countdown"><span style="--value: 59"></span></span>
    sec
  </div>
</div>

`} />
  
```html
<div class="grid grid-flow-col gap-5 text-center auto-cols-max">
  <div class="flex flex-col">
    <span class="font-mono text-5xl countdown"><span style="--value: 15"></span></span>
    days
  </div>
  <div class="flex flex-col">
    <span class="font-mono text-5xl countdown"><span style="--value: 10"></span></span>
    hours
  </div>
  <div class="flex flex-col">
    <span class="font-mono text-5xl countdown"><span style="--value: 24"></span></span>
    min
  </div>
  <div class="flex flex-col">
    <span class="font-mono text-5xl countdown"><span style="--value: 59"></span></span>
    sec
  </div>
</div>

```
### In boxes

<CodeRender code={`
<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="font-mono text-5xl countdown"><span style="--value: 15"></span></span>
    days
  </div>
  <div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
    <span class="font-mono text-5xl countdown"><span style="--value: 10"></span></span>
    hours
  </div>
  <div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
    <span class="font-mono text-5xl countdown"><span style="--value: 24"></span></span>
    min
  </div>
  <div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
    <span class="font-mono text-5xl countdown"><span style="--value: 59"></span></span>
    sec
  </div>
</div>

`} />
  
```html
<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="font-mono text-5xl countdown"><span style="--value: 15"></span></span>
    days
  </div>
  <div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
    <span class="font-mono text-5xl countdown"><span style="--value: 10"></span></span>
    hours
  </div>
  <div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
    <span class="font-mono text-5xl countdown"><span style="--value: 24"></span></span>
    min
  </div>
  <div class="flex flex-col p-2 bg-neutral rounded-box text-neutral-content">
    <span class="font-mono text-5xl countdown"><span style="--value: 59"></span></span>
    sec
  </div>
</div>

```   

    