Countdown

<div class="bg-dark/10 rounded flex flex-col overflow-hidden" x-data="{target:App.Dayjs('2022-04-01T00:00:00')}" x-init="$nextTick(() => {
		$refs.date.innerHTML = target.format('DD MMMM YYYY');
		let update = function(){
			let now = App.Dayjs();
			let days = target.diff(now, 'day');
			let hours = target.diff(now, 'hour');
			let mins = target.diff(now, 'minute');
			
			hours = hours - (days*24);
			mins = mins - ((days*24*60)+(hours*60));
			
			$refs.days.innerHTML = days < 10 ? '0'+days : days;
			$refs.hours.innerHTML = hours < 10 ? '0'+hours : hours;
			$refs.mins.innerHTML = mins < 10 ? '0'+mins : mins;
		}
		update();
		setInterval(update,1000);
	});">
    <div class="flex-1 p-8 space-y-4 flex flex-col items-center">
        <div class="text-sm opacity-50">Enrolment ends in</div>
        <div class="flex text-4xl sm:text-5xl space-x-4">
            <div class="flex flex-col items-center">
                <div class="tabular-nums" x-ref="days">--</div>
                <div class="text-sm uppercase opacity-50">Days</div>
            </div>
            <div class="">:</div>
            <div class="flex flex-col items-center">
                <div class="tabular-nums" x-ref="hours">--</div>
                <div class="text-sm uppercase opacity-50">Hours</div>
            </div>
            <div class="">:</div>
            <div class="flex flex-col items-center">
                <div class="tabular-nums" x-ref="mins">--</div>
                <div class="text-sm uppercase opacity-50">Minutes</div>
            </div>
        </div>
    </div>
    <div class="bg-dark/10 text-center p-3" x-ref="date"></div>
</div>