JSFiddle - React, Tailwind, and code Playground

by Alberto_Montiel

HTML

<div class="showing-activity">
  <div class="section-header">Scheduled Showing Activity</div>
    <table>
      <tr>
        <th></th>
        <th>{{getMyAddress()}}</th>
        <th>{{getActiveHeader()}}</th>
        <th>{{getPendingHeader()}}</th>
        <th>{{getClosedHeader()}}</th>
      </tr>
      <tr>
        <td>As of the first week </td>
        <td>2</td> 
        <td>
          {4}}
          <span>65</span>
        </td>
        <td>
          56
          <span>76</span>
        </td>
        <td>
          67
          <span>67</span>
        </td>
      </tr>
      <tr>
        <td>65</td>
        <td>23</td>
        <td>
          2
          <span>3</span>
        </td>
        <td>
          32
          <span>32</span>
        </td>
        <td>
          32
          <span>5</span>
        </td>
      </tr>
    </table>
    <p >N/A indicates there are not enough relevant listings to display showing data.</p>
    <p>* First week data is not available for this listing until the first week is complete.</p>
</div>

SCSS

@mixin card($margin-left, $padding) {
    background: white;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    margin-left: $margin-left;
    border-radius: 3px;
    padding: $padding;
    border: 1px solid var(--pbr-ion-card-border-color);
    color: black !important;
  }

@mixin letter-size($size) {
  width: 612px * $size;
  height: 792px * $size; 
  font-size: 12px * $size;
  padding: 55px * $size;
  margin-bottom: 50px * $size;
}
/* You can add global styles to this file, and also import other style files */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap');
:root {
  /** PBR Font **/
  font-family: 'Open Sans', sans-serif;
  --ion-font-family: 'Open Sans', sans-serif;

  /** PBR Colors **/
  --pbr-blue: #307DD7;
  --pbr-green: #009145;
  --pbr-text-color: #4D4D4D;
  --pbr-text-dark: #4A4A4A;
  --pbr-ion-card-border-color:#A4A4A4;
  --pbr-color-primary-contrast: #ffffff;

  --price-reduction-darkest-blue:#000000;
  --price-reduction-dark-blue:#000B78;
  --price-reduction-blue:#307DD7;
  --price-reduction-light-blue:#008EFF50; 
  --price-reduction-lightest-blue: #307DD710; 

  /** color **/
  --alfaCoverColor: #FFFFFFAA;
  --alfaCoverBorderColor: #4A4A4A;

  /** size **/
  --iconSize: 50px;

  /** Table **/
  --table-row-background: #EDEDED;
  --table-row-border: #9B9B9B;


  /** Font weights **/
  .regular { font-weight:400 }
  .semi-bold { font-weight: 600 }
  .bold { font-weight: 700 }
  .extra-bold { font-weight: 800 }

  /** Full width charts **/
  .section-header {
    font-size: 14px;
    font-weight: 800;
    padding: 8px 0 8px;
    color: var(--pbr-text-dark);
}
  .chart-card {
    width: 607px;
    @include card(0, 0); 
    padding: 8px;
}
  /** Other global **/
  li { list-style-type: none; }

}
.chart-align {
  display: flex;
  justify-content: center;
  align-items: center;
}

.showing-activity {
    table {
        border-collapse: separate;
        border-spacing: 0;
        @include card(0, 0); 
  ...