JSFiddle - React, Tailwind, and code Playground

HTML

<div id="timer1"></div>

CSS

#timer1 {
    display:table-cell;
}
#timer1 > div {
    margin-left: 5px;
}
#timer1 > div:first-child {
    margin: 0;
}
#timer1 div {
    display:inline-block;
}
#timer-header {
    display:block!important;
    padding-bottom:15px;
    text-align:center;
}
#timer1 div[id^="title-"] {
    display:block;
    text-align:center;
    margin-left:-7px;
    width:100%;
}
#timer1 #title-seconds {
    margin:0;
}
.left, .right, .delimiter {
    font-size:32px;
}
.left, .right {
    background-color:#61890C;
    color:white;
    padding:5px;
}
.left {
    margin-right: 5px;
}
.delimiter {
    padding-left:5px;
}

JavaScript

//Создаем заголовок для таймера
createElements("timer1", "timer-header", false, true);

//Создаем блоки, которые будут содержать [дни, часы, минуты, секунды]
//Блоки будут созданы внутри элемента с id "timer1"
["days", "hours", "minutes", "seconds"].forEach(function (id) {
    createElements("timer1", id, false, true);

    //Для каждого блока [дни, часы, минуты, секунды]
    //Создаем дочерние блоки
    //Они будут содержать левую и правую цифру соответственно
    ["left", "right"].forEach(function (child_id) {
        createElements(id, child_id, true, true);
    });

    //Создаем блоки для разделителей
    if (id !== "seconds") {
        createElements(id, 'delimiter', true, true);
    }

    //Создаем подписи для значений
    createElements(id, 'title-' + id, false, true);
});

//Структура после создания всех элементов (Каждая цифра в своем блоке):
//<div id="timer1">
//    <div id="timer-header"></div>
//    <div id="days">
//        <div class="left"></div>
//        <div class="right"></div>
//        <div class="delimiter"></div>
//        <div id="title-days"></div>
//    </div>
//    <div id="hours">
//        <div class="left"></div>
//        <div class="right"></div>
//        <div class="delimiter"></div>
//        <div id="title-hours"></div>
//    </div>
//    <div id="minutes">
//        <div class="left"></div>
//        <div class="right"></div>
//        <div class="delimiter"></div>
//        <div id="title-minutes"></div>
//    </div>
//    <div id="seconds">
//        <div class="left"></div>
//        <div class="right"></div>
//        <div id="title-seconds"></div>
//    </div>
//</div>

//Задаем заголовок
var header = document.getElementById('timer-header');
header.innerHTML = "До конца акции осталось:";

//Выставляем разделители (в примере двоеточие)
var delimiter = Array.prototype.slice.call(document.getElementsByClassName('delimiter'));
delimiter.forEach(function (div) {
    div.innerHTML = ":";
});

//Задаем подписи к значениям...