JSFiddle - React, Tailwind, and code Playground

by Harmonix Motion

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

   <div id="accordion">
        <button class="btn btn-danger btn-block" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseExample">
View Statistics</button>
      <div id="collapseOne" class="collapse" data-parent="#accordion">
        <div class="card-body">

           <div class="table-responsive">
         <table class="table table-sm">
            <tr>
               <th scope="col">Employee name</th>
               <th scope="col">Reason</th>
               <th scope="col">Month</th>
               <th scope="col">Week</th>
               <th scope="col">Year</th>
            </tr>
            {%- for data in get_missed_weekly_reports_employees_name_and_reason -%}
            <tr>
               <td scope="row">{{ data[0] }}</td>
               <td scope="row">{{ data[1] }}</td>
               <td scope="row">{{ data[2] }}</td>
               <td scope="row">{{ data[3] }}</td>
               <td scope="row">{{ data[4] }}</td>
            </tr>
            {%- endfor -%}
         </table>
      </div>



        </div>
      </div>
      </div>