<a id="countdown"></a>

## Countdown  
**Category**: Data Display
Display time remaining with various styles and animations
### Examples

#### Clock Style  
```python
Span(
    Span(style="--value:10;"), "h",
    Span(style="--value:24;"), "m",
    Span(style="--value:59;", **{"data-countdown": "true"}), "s",
    cls='countdown font-mono text-2xl'
)
```

#### Labeled inline  
```python
units = [(15, "days"), (10, "hours"), (24, "min"), (59, "sec")] 
Div(
    *(Div(
        Span(
            Span(
                style=f"--value:{value};",
                **{"data-countdown": "true"} if unit == "sec" else {}
            ),
            cls='countdown font-mono text-4xl'
        ),
        unit
    ) for value, unit in units),
    cls='flex gap-5'
)
```

#### Basic Countdown  
```python
Span(
    Span(style="--value:59;", **{"data-countdown": "true"}),
    cls='countdown'
)
```

#### Clock with colons  
```python
Span(
    Span(style="--value:10;"), ":",
    Span(style="--value:24;"), ":",
    Span(style="--value:59;", **{"data-countdown": "true"}),
    cls='countdown font-mono text-2xl'
)
```

#### Labeled under  
```python
units = [(15, "days"), (10, "hours"), (24, "min"), (59, "sec")]  
Div(
    *(Div(
        Span(
            Span(
                style=f"--value:{value};",
                **{"data-countdown": "true"} if unit == "sec" else {}
            ),
            cls='countdown font-mono text-5xl'
        ),
        unit,
        cls='flex flex-col'
    ) for value, unit in units),
    cls='grid auto-cols-max grid-flow-col gap-5 text-center'
)
```

#### Large text  
```python
Span(
    Span(style="--value:59;", **{"data-countdown": "true"}),
    cls='countdown font-mono text-6xl'
)
```

#### In boxes  
```python
units = [(15, "days"), (10, "hours"), (24, "min"), (59, "sec")]  
Div(
    *(Div(
        Span(
            Span(
                style=f"--value:{value};",
                **{"data-countdown": "true"} if unit == "sec" else {}
            ),
            cls='countdown font-mono text-5xl'
        ),
        unit,
        cls='bg-neutral rounded-box text-neutral-content flex flex-col p-2'
    ) for value, unit in units),
    cls='grid auto-cols-max grid-flow-col gap-5 text-center'
)
```