JSFiddle - React, Tailwind, and code Playground
by Joe Saad
HTML
<script>
function startTime() {
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
document.getElementById('txt').innerHTML = h+":"+m+":"+s;
$('#hours span, #minutes span, #seconds span').removeClass('current');
$('#ctime').html('timenow is:'+h+m+s);
$('#hours span:eq('+parseInt(h -1)+')').addClass('current');
$('#minutes span:eq('+parseInt(m -1)+')').addClass('current');
$('#seconds span:eq('+parseInt(s -1)+')').addClass('current');
var t = setTimeout(function(){startTime()},500);
}
</script>
<body onload="startTime()">
<div id="txt"></div>
<div id="Time">
<div id="hours">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span>11</span>
<span>12</span>
<span>13</span>
<span>14</span>
<span>15</span>
<span>16</span>
<span>17</span>
<span>18</span>
<span>19</span>
<span>20</span>
<span>21</span>
<span>22</span>
<span>23</span>
<span>24</span>
</div>
<div id="minutes">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span>11</span>
<span>12</span>
<span>13</span>
<span>14</span>
<span>15</span>
<span>16</span>
<span>17</span>
<span>18</span>
<span>19</span>
<span>20</span>
<span>21</span>
<span>22</span>
<span>23</span>
<span>24</span>
<span>25</span>
<span>26</span>
<span>27</span>
<span>28</span>
<span>29</span>
<span>30</span>
<span>31</span>
<span>32</span>
<span>33</span>
<span>34</span>
<span>35</span>
<span>36</span>
<span>37</span>
<span>38</span>
<span>39</span>
<span>40</span>
...
CSS
.current {
color: red;
font-size: 22px;
}