time_stuff = operator.attrgetter(*(keys := "year month day hour minute second".split()))
    df = (
        pandas.to_datetime(["now"])
        .to_series()
        .apply(time_stuff)
        .apply(list)
        .series()
        .rename(columns=dict(enumerate(keys))).reset_index(drop=True)
        .set_index(Index(["value"]))
        .rename_axis(columns=["key"])
    ); df

%%
<script>
function setTime(){
    let now = new Date();
    let parts = {
        year: now.getFullYear(), month: now.getMonth() + 1,
        day: now.getDate(), hour: now.getHours(), 
        minute: now.getMinutes(), second: now.getSeconds()};
    for (clock of document.getElementsByClassName("clock")) {
        for (key of {{df.columns.to_list()}}){
            for (td of clock.getElementsByClassName(key)) {
                td.textContent = parts[key];
            }
        }
    }
}
setTime();
setInterval(setTime, 1000);
</script>
<style>
{%- for k in df.columns -%}
.{{k}} {--this: --{{k}};}
{%- endfor -%}
</style>
<table id=A class=clock style="{{pipe(df.T["value"].items(), map("--%s: %s".__mod__), "; ".join, "{};".format)}}">
    <caption>a clock</caption>
    <thead>
         {%- for k in df.columns -%}
            <th>{{k}}</th>
         {%- endfor -%}
    </thead>
    <tbody>
        <tr>
            {%- for k in df.columns -%}
            <td class={{k}}>{{df.loc["value", k]}}</td>
            {%- endfor -%}
        </tr>
    </tbody>
</table>

%%html
<style>
#A {
    thead {
        display: none;
    }
    tr, td {
        display: inline;
    }
    .hour {
        font-size: larger;
    }
    .year, .month {
        &::after {
            content: ".";
        }
    }
    .minute::before {
        content: ":"; 
    }
    .second {
        font-size: smaller;
        &::before {
            content: ":";
        }
    }
}
</style>