G-Loot DS — countdown in boxes

by Augustin Hiebel

HTML

<div className="w-28 flex flex-col gap-1 rounded-xl bg-gradient-radial-spotlight from-ui-500 to-ui-700 p-4">
  <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="w-28 flex flex-col gap-1 rounded-xl bg-gradient-radial-spotlight from-ui-500 to-ui-700 p-4">
  <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="w-28 flex flex-col gap-1 rounded-xl bg-gradient-radial-spotlight from-ui-500 to-ui-700 p-4">
  <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>