JSFiddle - React, Tailwind, and code Playground

HTML

<div id="screen">
    <ul id="hours">   
    </ul>
    <ul id="min_h">
    </ul>
    <ul id="min_m">
    </ul>
</div>

CSS

#screen {
    height:600px;
    width:300px;
}

#hours{
    text-align: center;
    width: 30%;
    height: 100%;
    float:left;   
}

#hours > li{
        border : 1px solid #000;
    border-bottom: none;
    height:24px;  
}

#min_h{
    text-align: center;
    width: 30%;
    height: 100%;
    float:left;   
}

#min_h > li{
    border : 1px solid #000;
    border-bottom: none;
    height : 99px;
}

#min_m{
    width:30%;
    height:100%;
    float:left;   
}

#min_m> li{
    border : 1px solid #000;
    border-bottom: none;
    height : 59px;
}

JavaScript

for (i = 0; i < 24; i++){
    dojo.place(
        dojo.create("li", {
        innerHTML : i
        }), "hours", "last") 
}

for (i = 0; i < 6; i++){
    dojo.place(
        dojo.create("li", {
        innerHTML : i
        }), "min_h", "last") 
}

for (i = 0; i < 10; i++){
    dojo.place(
        dojo.create("li", {
        innerHTML : i
        }), "min_m", "last") 
}