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>

CSS

.countdown-timer {
    font-size:4em;
    font-weight:800;
}

JavaScript

var exercisePlan = [{
    "Name": "Stretch",
        "Time": 300000
}, {
    "Name": "Jacks",
        "Time": 60000
}, {
    "Name": "Jog",
        "Time": 180000
}, {
    "Name": "side to side",
        "Time": 60000
}, {
    "Name": "Stretch",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 20000
}, {
    "Name": "Pushups",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 20000
}, {
    "Name": "Crunches",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 20000
}, {
    "Name": "Squats",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 20000
}, {
    "Name": "Lunges",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 20000
}, {
    "Name": "Pump Kicks",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 20000
}, {
    "Name": "Elevated Push ups",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 20000
}, {
    "Name": "Cross Punch Sit Ups",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 20000
}, {
    "Name": "Standing Leg Raises",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 20000
}, {
    "Name": "Jump Squats",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 20000
}, {
    "Name": "Close Grip Push ups",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 20000
}, {
    "Name": "bikes",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 20000
}, {
    "Name": "Burpees",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 60000
}, {
    "Name": "Pushups",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 20000
}, {
    "Name": "Crunches",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 20000
}, {
    "Name": "Squats",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 20000
}, {
    "Name": "Lunges",
        "Time": 60000
}, {
    "Name": "Break",
        "Time": 20000
}, {
    "Name": "Pump Kicks",
        "Time": 60000
}, {
   ...