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 highlight">
                                <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

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

JavaScript

(function() {
	const BOX_HEIGHT = 48;

	function OnLoad() {
    	$('#clock-container .year-stack').each(function() {
        	let $this = $(this);
            let $first = $this.find('.year-row-0');
            let $highlighted = $this.find('.highlight');
            if($first == $highlighted) {
            	// Don't need to scroll if first is highlighted
            	return;
            }
            else {
            	let index = $highlighted.index();
                $this.find('table').animate({
                	top: '-' + (BOX_HEIGHT * index) + 'px',
                    
                }, 500, 'linear');
            }
            
        });
    }
    

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