JSFiddle - React, Tailwind, and code Playground

by qunzorez

HTML

<div class="quiz-container"></div>
<div class="answ-container"></div>

CSS

.step-name {
    text-align: center;
    color: #fff;
    font-weight: 800;
    font-size: 25px;
}

.frequency {
    position: fixed;
    top: 29%;
    right: 20px;
    color: #fff;
    background-color: #0b468f;
    border-radius: 5px;
    padding: 0 14px 0 14px;
    font-size: 20px;
    font-weight: 600;
}

.step-desc {
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 25px;
}

.step-image {
    text-align: center;
}

    .step-image > img {
        width: 400px;
        height: 400px;
    }

.separation-div {
    width: 400px;
    height: 400px;
}

.answ-container {
    text-align: center;
}

.btn {
    width: auto;
    height: auto;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 600;
    color: #000;
    background-color: #fff;
    border: none;
    border-radius: 45px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    font-size: 22px;
    margin: 10px;
    padding: 15px 45px 15px 45px;
}

#overlay {
    z-index: 99999;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8) none 50% / contain no-repeat;
    cursor: pointer;
    transition: 0.3s;
    visibility: hidden;
    opacity: 0;
}

    #overlay.open {
        visibility: visible;
        opacity: 1;
    }

    #overlay:after {
        content: "\2715";
        position: absolute;
        color: #fff;
        top: 10px;
        right: 20px;
        font-size: 2em;
    }

.table-am {
    margin: 0 1rem;
    position: relative;
    background: #fff;
    width: 100%;
    border-spacing: 0 1rem;
    border-collapse: separate;
    border-radius: .25rem;
}


thead tr:first-child {
    background: #E84C3D;
    color: #fff;
    border: none;
}

th:first-child,
td:first-child {
    padding: 0 15px 0 20px;
}

th {
    border-collapse: separate;
    border-spacing: 5em;
   ...

JavaScript

var quiz = [
    { stepName: "Check Oil", frequency: "1 / Shift", stepDescription: "Verify the presence of spilled oil", image: "https://cdn.iconscout.com/icon/free/png-512/schedule-maintenance-1575170-1331504.png", choices: ["OK", "NOK", "N/A"], savedAnswer: "" },
    { stepName: "Check noise", frequency: "1 / Shift", stepDescription: "Check for unusual noise from machine", image: "", choices: ["OK", "NOK", "N/A"], savedAnswer: "" },
    { stepName: "Clean filter", frequency: "1 / Week (Monday)", stepDescription: "Clean the air filter at compressed air inlet", image: "https://cdn.iconscout.com/icon/free/png-512/schedule-maintenance-1575170-1331504.png", choices: ["OK", "NOK", "N/A"], savedAnswer: "" },
    { stepName: "Check Andon", frequency: "1 / Shift", stepDescription: "Check if andon light is on", image: "https://cdn.iconscout.com/icon/free/png-512/schedule-maintenance-1575170-1331504.png", choices: ["OK", "NOK", "N/A"], savedAnswer: "" },
    { stepName: "Safety barrier", frequency: "1 / Shift", stepDescription: "Check the proper functionality of light barrier(s)", image: "https://cdn.iconscout.com/icon/free/png-512/schedule-maintenance-1575170-1331504.png", choices: ["OK", "NOK"], savedAnswer: "" }
];

var index = 0;

function parseQuiz() {
    for (var i = 0; quiz.length > i; i++) {
        creatingAnswers(quiz[index].choices[i]);
        setQuizToDiv(quiz[index].stepName, quiz[index].frequency, quiz[index].stepDescription, quiz[index].image);
    }
}

function setQuizToDiv(stepName, frequency, stepDescription, image) {
    $(".quiz-container").html('');
    var quizHtml;
    if (image != "") {
        quizHtml = `
        <div class="step-name">
            ${stepName}
        </div>
        <div class="frequency">
           Frequency: ${frequency}
        </div>
        <div class="step-desc">
           ${stepDescription}
        </div>
        <div class="step-image">
        <div id="overlay"></div>
        <img class="main-img" src="${image}" />
 ...