JSFiddle - React, Tailwind, and code Playground

by moku23

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Account Data Table</title>
<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  table, th, td {
    border: 1px solid black;
  }
  th, td {
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
</style>
</head>
<body>

<table>
  <tr>
    <th>Account Combination</th>
    <th>Count</th>
  </tr>
  <tr>
    <td>40% Monthly-25000-USD</td>
    <td>728.0</td>
  </tr>
  <tr>
    <td>40% Monthly-50000-USD</td>
    <td>420.0</td>
  </tr>
  <tr>
    <td>25000-25000-USD</td>
    <td>324.0</td>
  </tr>
  <tr>
    <td>40% Monthly-100000-USD</td>
    <td>305.0</td>
  </tr>
  <tr>
    <td>80% Monthly-25000-USD</td>
    <td>290.0</td>
  </tr>
  <tr>
    <td>40% Monthly-10000-USD</td>
    <td>287.0</td>
  </tr>
  <tr>
    <td>26% Monthly-5000-USD</td>
    <td>211.0</td>
  </tr>
  <tr>
    <td>40% Monthly-5000-USD</td>
    <td>195.0</td>
  </tr>
  <tr>
    <td>80% Monthly-10000-USD</td>
    <td>184.0</td>
  </tr>
  <tr>
    <td>26% Monthly-25000-USD</td>
    <td>176.0</td>
  </tr>
  <tr>
    <td>80% Monthly-50000-USD</td>
    <td>159.0</td>
  </tr>
  <tr>
    <td>26% Monthly-10000-USD</td>
    <td>154.0</td>
  </tr>
  <tr>
    <td>50000-50000-USD</td>
    <td>137.0</td>
  </tr>
  <tr>
    <td>80% Monthly-100000-USD</td>
    <td>132.0</td>
  </tr>
  <tr>
    <td>100000-100000-USD</td>
    <td>121.0</td>
  </tr>
  <tr>
    <td>60% Monthly-25000-USD</td>
    <td>105.0</td>
  </tr>
  <tr>
    <td>40% Monthly-25000-GBP</td>
    <td>82.0</td>
  </tr>
  <tr>
    <td>26% Monthly-50000-USD</td>
    <td>79.0</td>
  </tr>
  <tr>
    <td>40% Supercharged-25000-USD</td>
    <td>75.0</td>
  </tr>
  <tr>
    <td>10000-10000-USD</td>
    <td>74.0</td>
  </tr>
</table>

</body>
</html>

CSS

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    margin: 0;
    background: #f4f7f6;
    color: #333;
  }
  table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  }
  th, td {
    padding: 12px 15px;
    text-align: right;
  }
  th {
    background-color: #009879;
    color: red;
    text-transform: uppercase;
  }
  tr {
    border-bottom: 1px solid #dddddd;
  }
  tr:nth-of-type(even) {
    background-color: #f3f3f3;
  }
  tr:last-of-type {
    border-bottom: 2px solid #009879;
  }
  tr:hover {
    background-color: #f1f1f1;
    cursor: pointer;
  }
  tr:hover td {
    font-weight: bold;
  }
  @media screen and (max-width: 600px) {
    table {
      width: 100%;
      display: block;
    }
    thead {
      display: none;
    }
    tr {
      margin-bottom: 10px;
      display: block;
      border-bottom: none;
    }
    td {
      text-align: right;
      display: block;
      text-align: center;
      border-bottom: 1px dotted #ddd;
    }
    td:last-child {
      border-bottom: none;
    }
    td:before {
      content: attr(data-label);
      float: left;
      font-weight: bold;
      text-transform: uppercase;
    }
  }