JSFiddle - React, Tailwind, and code Playground

by Ross Dederer

HTML

</style>
<table class="chat">
  <colgroup>
    <col width="10%" />
    <col width="80%" />
    <col width="10%" />
  </colgroup>
  <thead>
    <tr class="row-header">
      <th colspan="3">[iMessage]<br />Date: 2017-11-21</th>
    </tr>
  </thead>
  <tr class="row-users">
    <td>
      <table class="ringtail-count-table">
        <thead>
          <th></th>
          <th>NAME</th>
          <th>MSG</th>
          <th>ATC</th>
          <th>INV</th>
        </thead>
        <tbody>
          <tr>
            <td rowspan="2" class="col-group group-rank-1">
            <a href="javascript:myFunction(PARTICIPANTS)">
                PARTICIPANTS
                </a>
         
            </td>
            <td class="col-name">
              <div class="user-container"><span class="user-primary">+14129520927 </span><span class="user-secondary"> </span></div>
            </td>
            <td class="col-count">2</td>
            <td class="col-count"></td>
            <td class="col-count"></td>
          </tr>
          <tr>
            <td class="col-name">
              <div class="user-container"><span class="user-primary">+14438086198 </span><span class="user-secondary"> </span></div>
            </td>
            <td class="col-count"></td>
            <td class="col-count"></td>
            <td class="col-count"></td>
          </tr>
        </tbody>
      </table>
    </td>
    <td />
    <td />
  </tr>
</table>
<div class="content">
  <div class="row-date">
    <div colspan="3" class="cell-date-title">Tuesday, November 21, 2017</div>
  </div>
  <div id="cdid_61" class="row-data type-message user-new">
    <div class="cell-user">
      <div class="row-data-header">
        <div class="user-container">
          <div class="user-primary">+14129520927 </div>
          <div></div>
        </div>
        <div class="cell-date">
          <div class="content-time">12:06:33</div>
        </div>
      </div>
    </div>
    <div class="cell-data">
      <div...

CSS

body { font-family: sans-serif; width: 450px; }
.chat { width: 100%; font-family: verdana,arial,sans-serif; border-collapse: collapse; }
.chat * { font-size: 12px; }
.chat td { vertical-align: top; padding: .5em; .25em }
.chat th { vertical-align: top; padding: .5em; }

.chat .row-header { border-bottom-style: solid; border-bottom-width: 1px; }
.chat .row-header .deleted { color: red; text-transform: uppercase; }
.chat .row-header th { padding: 1em; text-align: center; font-size: 1.2em; }
.chat .row-users { }
.chat .row-data { border-top-width: 1px; border-top-style: solid; }
.row-date { margin: auto; width: 100%; display: flex; }

.chat .title-participants { font-size: 1.2em; font-weight: bold; }
.chat .ringtail-count-table { }
.chat .col-group { white-space: nowrap; font-weight: bold; }
.user-primary { white-space: normal; font-weight: bold; font-size: .75em; color: #585858 }
.chat .user-secondary { white-space: nowrap; font-size: .75em; }

.ringtail-count-table { border-collapse: collapse; margin-bottom: .5em; cursor: pointer } 
.ringtail-count-table th { font-size: 1.2em; font-weight: normal; border-width: .25em; border-style: solid; }
.ringtail-count-table td { border-width: .25em; border-style: solid; }
.ringtail-count-table .col-name { white-space: nowrap; }
.ringtail-count-table .col-count { text-align: center; }

.row-date .cell-date-title {
    font-size: .8em;
    color: #fff;
    margin: auto;
    text-align: center;
    background: #808080;
    padding: .5em .8em;
    border-radius: 0.5em;
    margin-top: .5em;
}

.row-data .content-date { font-size: .75em; }
.row-data .content-time { font-weight: bold; }
.row-data .content-nic { font-size: .75em; font-weight: bold; margin-top: .5em; }
.row-data .cell-user { white-space: nowrap; text-align: left; }
.row-data .cell-date { white-space: nowrap; text-align: right; align-content: flex-end; margin-left: auto; }

.row-data.device-owner .cell-user .user-container { }

.row-data.type-enter .cell-data {...

JavaScript

function myFunction(myMessage) {
    alert(myMessage);
}