JSFiddle - React, Tailwind, and code Playground

by swordys

HTML

<table class='data-sources-table-container'>
  <tr class='data-sources-table-row'>
    <th class='data-sources-table-header' />
    <th class='data-sources-table-header'>
      <span class='data-sources-table-header-label'>
        NAME
      </span>
    </th>
    <th class='data-sources-table-header'>
      <span class='data-sources-table-header-label'>
        DATE ADDED
      </span>
    </th>
    <th class='data-sources-table-header'>
      <span class='data-sources-table-header-label'>
        ADDED BY
      </span>
    </th>
    <th class='data-sources-table-header'>
      <span class='data-sources-table-header-label'>
        STATUS
      </span>
    </th>
  </tr>
  <tr class='data-sources-table-row'>
    <td class='data-sources-table-row-entry'>
      <div class='data-sources-check-enty'>
        <img src='https://placeholder.pics/svg/100x100' class='data-sources-table-check-icon' />
      </div>
    </td>
    <td class='data-sources-table-row-entry table-grow-2'>
      <div class='data-sources-file-entry'>
        <img src='https://placeholder.pics/svg/100x100' class='data-sources-table-format-icon' />
        <span class='data-sources-table-row-text'>
          Assistant-chat-data.txt
        </span>
      </div>
    </td>
    <td class='data-sources-table-row-entry table-grow-static'>
      <span class='data-sources-table-row-text'>
        Dec 2, 2018
      </span>
    </td>
    <td class='data-sources-table-row-entry table-grow-1'>
      <span class='data-sources-table-row-text'>
        Kondo Ieyasu
      </span>
    </td>
    <td class='data-sources-table-row-entry'>
      <div class='data-sources-table-status'>
        Processing
      </div>
    </td>
  </tr>
  <tr class='data-sources-table-row'>
    <td class='data-sources-table-row-entry' />
    <td class='data-sources-table-row-entry'>
      <span class='data-sources-table-row-text'>
        Erica-chat-data.csv
      </span>
    </td>
    <td class='data-sources-table-row-entry'>
      <span...

SCSS

.data-sources-table-container {
  width: 100%;
  border-collapse: collapse;
}

.data-sources-table-header,
.data-sources-table-row-entry {
  text-align: left;
  font-size: 21px;
  font-family: arial;
  white-space: nowrap;
  border: 1px solid red;
}

.data-sources-table-header {
  padding: 10px 30px 10px 0;
  &:last-child {
    padding-right: 80px;
  }
}

.data-sources-file-entry {
  display: flex;
  align-items: center;
  
  .data-sources-table-format-icon {
    height: 40px;
    width: auto;
    margin-right: 10px;
  }
}

.data-sources-check-enty {
  display: flex;
  align-items: center;
  margin: 0 20px 0 10px;
  height: 30px;
  .data-sources-table-check-icon {
    height: 100%;
    width: auto;
  }
}

.data-sources-table-status {
  display: inline-block;
  background: pink;
  border-radius: 2px;
  padding: 5px 8px;
}

.table-grow-3 {
  width: 75%;
}

.table-grow-2 {
  width: 50%;
}

.table-grow-1 {
  width: 25%;
}

.table-grow-static {
  width: 120px;
}


.wer {
  width: 100%;
  border: 1px solid purple
}


.wor {
  /* width: 50%; */
  width: 120px;
  margin-left: 50%;
}

.data-sources-table-row {
  /* border-top: 1px solid red; */
  &:first-child {
    border: none;
  }
}