JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>

  <body>

    <tbody>
      <tr data-index="0">
        <td>
          <div class="card border-left-success shadow h-100 py-2 mb-2 ml-2">
            <div class="card-body">
              <h4 class="card-title mb-2 font-weight-bold">Service Name -1 </h4>
              <div class="clearfix my-3"></div>
              <h5 class="card-text">Regarding Service Name-1</h5>
              <h5><span class="badge badge-pill badge-success"><a title="Job Details" target="_blank" href="hhh" class="text-white">DOG</a> </span> <span class="badge badge-pill badge-success"><a title="Job Details" target="_blank" href="hhh" class="text-white">CAT</a> <a title="Volumetric report" class="text-white" target="_blank" href="hhh"><i class="fas fa-file-medical-alt"></i></a> <a title="Dup report" class="text-white" href="hhh"><i class="fas fa-copy"></i></a> <a title="Embargo Privacy Filter Report" class="text-white" href="hhh"><i class="fas fa-file-excel"></i></a> <a title="CAC report" class="text-white" href="hhh"><i class="fas fa-file-signature"></i></a> <a title="Existing Source Place Report" class="text-white" href="hhh"><i class="fas fa-file-archive"></i></a> <a title="VVS Validation Failed Report" class="text-white" href="hhh"><i class="fas fa-file-code"></i></a> <a title="Job report" class="text-white" href="hhh"><i class="fas fa-file-invoice"></i></a> <a title="Cumulative report" class="text-white" href="hhh"><i class="fas fa-file-medical"></i></a></span> <span class="badge badge-pill badge-success"><a title="Job Details" target="_blank" href="hhh" class="text-white">LION</a> <a title="Volumetric report" class="text-white" target="_blank" href="hhh"><i class="fas fa-file-medical-alt"></i></a> <a title="Job report" class="text-white"...