JSFiddle - React, Tailwind, and code Playground

by docluv

HTML

<div class="countdown-timer"></div>
<div class="countdown-activity"></div>
<div class="countdown-activity-time"></div>
<div class="activity-time-pause">Pause</div>
<div class="next-activity"></div>

CSS

.countdown-timer, .next-activity {
    font-size:4em;
    font-weight:800;
    margin: .7em;
}
.activity-time-pause {
    font-size:2em;
    border: solid #000 2px padding:2em;
    background: #1e5f1e;
    color:#fff;
    padding:.5em;
    margin:0;
}
.paused {
    background: #ffd800;
}
.next-activity {
    padding:.5em;
    margin:1em;
    background: #000;
    color:#eee;
}

JavaScript

var exercisePlan = [{
    "Name": "Stretch",
        "Time": 180000
}, {
    "Name": "Jacks",
        "Time": 60000
}, {
    "Name": "Jog",
        "Time": 120000
}, {
    "Name": "sprints",
        "Time": 60000
}, {
    "Name": "Stretch",
        "Time": 30000
}, {
    "Name": "Linear Kicks",
        "Time": 30000
}, {
    "Name": "Break",
        "Time": 10000
}, {
    "Name": "Chicken Kicks",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 10000
}, {
    "Name": "Wheel Kicks",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 10000
}, {
    "Name": "Roundhouse Kicks",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 20000
}, {
    "Name": "Pushups",
        "Time": 30000
}, {
    "Name": "Break",
        "Time": 10000
}, {
    "Name": "Crunches",
        "Time": 30000
}, {
    "Name": "Break",
        "Time": 10000
}, {
    "Name": "Squats",
        "Time": 30000
}, {
    "Name": "Break",
        "Time": 10000
}, {
    "Name": "Pump Kicks",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 10000
}, {
    "Name": "Burpees",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 10000
}, {
    "Name": "Lunges",
        "Time": 30000
}, {
    "Name": "Break",
        "Time": 10000
}, {
    "Name": "T-Ups",
        "Time": 30000
}, {
    "Name": "Break",
        "Time": 10000
}, {
    "Name": "Cross Punch Sit Ups",
        "Time": 30000
}, {
    "Name": "Break",
        "Time": 10000
}, {
    "Name": "Jump Squats",
        "Time": 30000
}, {
    "Name": "Break",
        "Time": 10000
}, {
    "Name": "Jacks",
        "Time": 30000
}, {
    "Name": "Break",
        "Time": 10000
}, {
    "Name": "freestyle punches",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 15000
}, {
    "Name": "Close Grip Push ups",
        "Time": 30000
}, {
    "Name": "Break",
        "Time": 10000
}, {
    "Name": "bikes",
        "Time": 30000
}, {
    "Name": "Break",
        "Time": 10000
}, {
   ...