JSFiddle - React, Tailwind, and code Playground

by winns

HTML

<div id="wrapper">
    <div id="display">
        <div id="d_left">
            00:00:00
        </div>
        <div id="d_right">
            00:00:00
        </div>
        <div class="clear"></div>
    </div>
    
    <div id="control">
        <button id="startstop">START</button>
        <button id="reset">RESET</button>
    </div>
</div>

CSS

*{margin: 0; padding: 0;}
body{background-color: #000;}

#wrapper{
    margin: 20px auto 0 auto; padding: 6px;
    width: 300px;
    text-align: center;
    background-color: #f8cc39;
    border-radius: 4px;
}

#display{
    color: #fff;
    font-size: 36px;
    background-color: #272729;
}
    #d_left{float: left; width: 50%;}
    #d_right{float: left; width: 50%;}

#control button{
    margin: 8px 4px 4px 4px; padding: 4px;
    width: 70px;
    font-size: 14px;
    background: #fff;
}

.clear{clear: both;}

JavaScript

var time = 0, time_s = 0, time_m = 0, time_h = 0,
    time_break = 21, // 2 min
    time_work = 0,
    action = 'start',
    display_right = 'work',
    timer;

//STOP-START
$('#startstop').click(function(){
    stopstart();
});

function stopstart(){
    if (action == 'start'){
        timer = setInterval(start, 1000);
        $('#startstop').text('STOP');
        action = 'stop';
        return;
    }
    if (action == 'stop'){
        clearInterval(timer, 1000);
        $('#startstop').text('START');
        action = 'start';
        return;
    }
}

function start(){
    time++;
    
    time_work++;
    if (time_work >= 10){
        time_break--;
        display_right = 'break';
        if (time_break <= 0){
            time_work = 0;
            time_break = 21;
            display_right = 'work';
        }
    }
    
    $('#d_left').text(time_convert(time));
    
    if (display_right == 'work'){
        $('#d_right').text(time_convert(time_work));
    }
    
    if (display_right == 'break'){
        $('#d_right').text(time_convert(time_break));
    }
    
}


// RESET
$('#reset').click(function(){
    reset();
});

function reset(){
    time = 0; time_work = 0; time_break = 21;
    clearInterval(timer, 1000);
    $('#startstop').text('START');
    action = 'start';
    
    $('#d_left').text('00:00:00');
    $('#d_right').text('00:00:00');
}

//TIME CONVERT
function time_convert(sec){
    var h = Math.floor(sec / (60 * 60));
        if (h<10){h = '0' + h;}  
    
    var divisor_for_minutes = sec % (60 * 60);
    var m = Math.floor(divisor_for_minutes / 60);
        if (m<10){m = '0' + m;}
 
    var divisor_for_seconds = divisor_for_minutes % 60;
    var s = Math.ceil(divisor_for_seconds);
        if (s<10){s = '0' + s;}
    
    thetime = h +':'+ m +':'+ s;
    return thetime;
}