JSFiddle - React, Tailwind, and code Playground

by von

HTML

<div class="row" v-if="scores.length <= 0">
    <div class="col-12 text-center alert alert-success">
      Data Loading Please wait
    </div>
  </div>
  <div class="row p-5" v-else>
    <div class="card col-12 col-lg-4 col-md-6" v-for="score in scores">
      <div class="card-body">
        <div class="card-title display-4 text-bold">
          {{ Object.keys(score)[0] }}
        </div>
        <div class="card-subtitle">
          <span class="text-success text-bold"  v-if="willBeChecked(score[Object.keys(score)[0]])">CHECKED</span>
          <span class="text-danger text-bold" v-else>NOT CHECKED</span>
        </div>
        <div class="card-text" v-if="willShowDiv(score[Object.keys(score)[0]])">
          {{ Object.keys(score)[0] }} lorem ipsum get only hat ned
        </div>
      </div>
    </div>
  </div>