<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<table class="table table-hover text-nowrap">
  <thead>
    <tr>
      <th scope="col"></th>
      <th scope="col">Product Detail Views</th>
      <th scope="col">Unique Purchases</th>
      <th scope="col">Quantity</th>
      <th scope="col">Product Revenue</th>
      <th scope="col">Avg. Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Value</th>
      <td>18,492</td>
      <td>228</td>
      <td>350</td>
      <td>$4,787.64</td>
      <td>$13.68</td>
    </tr>
    <tr>
      <th scope="row">Percentage change</th>
      <td>
        <span class="text-danger">
          <i class="fas fa-caret-down me-1"></i><span>-48.8%</span>
        </span>
      </td>
      <td>
        <span class="text-success">
          <i class="fas fa-caret-up me-1"></i><span>14.0%</span>
        </span>
      </td>
      <td>
        <span class="text-success">
          <i class="fas fa-caret-up me-1"></i><span>46.4%</span>
        </span>
      </td>
      <td>
        <span class="text-success">
          <i class="fas fa-caret-up me-1"></i><span>29.6%</span>
        </span>
      </td>
      <td>
        <span class="text-danger">
          <i class="fas fa-caret-down me-1"></i><span>-11.5%</span>
        </span>
      </td>
    </tr>
    <tr>
      <th scope="row">Absolute change</th>
      <td>
        <span class="text-danger">
          <i class="fas fa-caret-down me-1"></i><span>-17,654</span>
        </span>
      </td>
      <td>
        <span class="text-success">
          <i class="fas fa-caret-up me-1"></i><span>28</span>
        </span>
      </td>
      <td>
        <span class="text-success">
          <i class="fas fa-caret-up me-1"></i><span>111</span>
        </span>
      </td>
      <td>
        <span class="text-success">
          <i class="fas fa-caret-up me-1"></i><span>$1,092.72</span>
        </span>
      </td>
      <td>
        <span class="text-danger">
          <i class="fas fa-caret-down me-1"></i><span>$-1.78</span>
        </span>
      </td>
    </tr>
  </tbody>
</table>