JSFiddle - React, Tailwind, and code Playground

by path411

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="bg-green-500">
<div class="min-h-screen py-6 flex flex-grow justify-center sm:py-12">
    <div id="main">
        <div class="relative py-3 sm:max-w-xl sm:mx-auto">
            <div id="clock-container" class="bg-green-600 border border-white shadow-md">
                <div class="flex flex-row" style="height: 48px;">
                    <div class="year-stack year-stack-0 overflow-hidden" style="height: 48px;">
                        <table class="year-table-0" style="width: 48px;">
                            <tr class="year-row-0">
                                <td class="border border-green-50 align-middle text-center m-1" style="height: 48px;">0
                                </td>
                            </tr>
                            <tr class="year-row-1">
                                <td class="border border-green-50 align-middle text-center m-1" style="height: 48px;">1
                                </td>
                            </tr>
                            <tr class="year-row-2">
                                <td class="border border-green-50 align-middle text-center m-1" style="height: 48px;">2
                                </td>
                            </tr>
                            <tr class="year-row-3">
                                <td class="border border-green-50 align-middle text-center m-1" style="height: 48px;">3
                                </td>
                            </tr>
                            <tr class="year-row-4">
                                <td class="border border-green-50 align-middle text-center m-1" style="height: 48px;">4
                                </td>
                            </tr>
                            <tr class="year-row-5">
                           ...

CSS

.year-stack td {
        background-color: red;
        color: white;
    }
    .year-stack > table {
        position:relative;
        top:0;
    }

JavaScript

(function() {
    
    class Clock {
        
        constructor() {
            this.year = "0000";
            this.$clock = $('#clock-container');
            this.tables = $('#clock-container table');
        
            this.boxHeight = 48;
            this.scrollSpeed = 500;
            this.scrollEasing = 'linear';
        }
        
        scrollTo(newYear) {
        	let newDigits = (newYear + '').split('');
            let curDigits = (this.year + '').split('');
            let _this = this;
            
            newDigits.forEach(function(digit, i) {
            	let curDigit = parseInt(curDigits[i], 10);
                let newDigit = parseInt(digit, 10);
                
                if(newDigit !== curDigit) {
                    let $table = $(_this.tables.get(i));
                    $table.find('.year-row-' + newDigit).addClass('highlight');
                    $table.animate({
                        top: '-' + (_this.boxHeight * newDigit) + 'px',

                    	}, _this.scrollSpeed, _this.scrollEasing, 
                    	function() {
                        	$table.find('.year-row-' + curDigit).removeClass('highlight');
                    	}
                    );
                }
                
                
            });
            
            this.year = newYear;
            
        }
    }
    
    function OnLoad() {
    	$('#clock-container .year-row-0').addClass('highlight');
        
        let clock = new Clock();
        clock.scrollTo("2020");
        
        let year = 2020;
        
        let interval = setInterval(function() {
        	clock.scrollTo(''+ year--);
        }, 1000);
    }
    

	$(function() {
		OnLoad();
	});
})();