JSFiddle - React, Tailwind, and code Playground

by von

HTML

<div class="row" v-if="!scores">
    <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="(value, key) in scores">
      <div class="card-body">
        <div class="card-title display-4 text-bold">
          {{ key }}
        </div>
        <div class="card-subtitle">
          <span class="text-success text-bold"  v-if="willBeChecked(value)">CHECKED</span>
          <span class="text-danger text-bold" v-else>NOT CHECKED</span>
        </div>
        <div class="card-text" v-if="willShowDiv(value)">
          {{ key }} lorem ipsum get only hat ned
        </div>
      </div>
    </div>