JSFiddle - React, Tailwind, and code Playground

by Gregory Nikitas

HTML

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<ul class = "list-group" style= "height: 330px; overflow-y:auto; margin-bottom:20px;">

    <li class = "list-group-item" id= "memberItem" *ngFor="let m in HEROES" style= "cursor:default;">
      <div class="col-md-2">{{m.id}}</div>
      <div class="col-md-3">{{m.name}}</div>
      <div class="col-md-3">Registered</div>
      <div class="col-md-2">Pending</div>
      <div class="col-md-2"><input  type= "checkbox" name= "circlescheck" [(ngModel)]="m.checked" style= " cursor:pointer;" ></div>

    </li>
  </ul>

JavaScript

let HEROES = [
    {id: 1, name:'Superman'},
    {id: 2, name:'Batman'},
    {id: 5, name:'BatGirl'},
    {id: 3, name:'Robin'},
    {id: 4, name:'Flash'}
];