G-Loot DS — countdown with labels under

by Augustin Hiebel

HTML

<div className="countdown justify-center items-baseline gap-2">
  <div className="flex flex-col gap-1">
    <span className="countdown text-5xl font-headings">
      <span style={{ "--value": "24" }} />
    </span>
    <small className="text-ui-300 text-sm uppercase leading-none">hours</small>
  </div>
  <div className="flex flex-col gap-1">
    <span className="countdown text-5xl font-headings">
      <span style={{ "--value": "60" }} />
    </span>
    <small className="text-ui-300 text-sm uppercase leading-none">minutes</small>
  </div>
  <div className="flex flex-col gap-1">
    <span className="countdown text-5xl font-headings">
      <span style={{ "--value": "60" }} />
    </span>
    <small className="text-ui-300 text-sm uppercase leading-none">seconds</small>
  </div>
</div>