JSFiddle - React, Tailwind, and code Playground

by meetamit

HTML

<table class="l_entity-selector-container">
  <thead>
    <tr>
      <th>
        ENTITIES
      </th>
      <th>
        ON/<br/>
        OFF
      </th>
      <th>
        HIGH-<br/>
        LIGHT
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="s_entity-visible">
      <td>
        Austria
      </td>
      <td class="j_onOff" data-prop="hidden"></td>
      <td class="j_onOff" data-prop="highlighted"></td>
    </tr>
    <tr class="s_entity-visible">
      <td>
        Belgium
      </td>
      <td class="j_onOff" data-prop="hidden"></td>
      <td class="j_onOff" data-prop="highlighted"></td>
    </tr>
    <tr class="s_entity-visible">
      <td>
        Bulgaria
      </td>
      <td class="j_onOff" data-prop="hidden"></td>
      <td class="j_onOff" data-prop="highlighted"></td>
    </tr>
    <tr class="s_entity-visible">
      <td>
        Cyprus
      </td>
      <td class="j_onOff" data-prop="hidden"></td>
      <td class="j_onOff" data-prop="highlighted"></td>
    </tr>
    <tr class="s_entity-visible">
      <td>
        Czech
      </td>
      <td class="j_onOff" data-prop="hidden"></td>
      <td class="j_onOff" data-prop="highlighted"></td>
    </tr>
    <tr class="s_entity-visible">
      <td>
        Denmark
      </td>
      <td class="j_onOff" data-prop="hidden"></td>
      <td class="j_onOff" data-prop="highlighted"></td>
    </tr>
    <tr class="s_entity-visible">
      <td>
        Estonia
      </td>
      <td class="j_onOff" data-prop="hidden"></td>
      <td class="j_onOff" data-prop="highlighted"></td>
    </tr>
    <tr class="s_entity-visible">
      <td>
        Finland
      </td>
      <td class="j_onOff" data-prop="hidden"></td>
      <td class="j_onOff" data-prop="highlighted"></td>
    </tr>
    <tr class="s_entity-visible">
      <td>
        France
      </td>
      <td class="j_onOff" data-prop="hidden"></td>
      <td class="j_onOff" data-prop="highlighted"></td>
    </tr>
    <tr class="s_entity-visible">
      <td>
   ...

CSS

body { margin: 10px 0; }

table.l_entity-selector-container{margin:0 12px 11px;font-size:12px;line-height:13px;border-spacing:4px 1px;}
table.l_entity-selector-container thead th{color:#444;font-weight:400;font-size:10px;line-height:1;}
table.l_entity-selector-container thead th:first-child{font-size:16px;font-weight:light;text-align:left;}
table.l_entity-selector-container thead th:first-child span{margin-left:-2px}
table.l_entity-selector-container tr{color:#888;font-weight:bold;}
table.l_entity-selector-container tr .j_onOff{background-color:#b7d0ed;width:38px}
table.l_entity-selector-container tr.s_entity-visible{color:#444;}
table.l_entity-selector-container tr.s_entity-visible .j_onOff[data-prop=hidden]{background-color:#57a0f4}
table.l_entity-selector-container tr.s_entity-highlighted .j_onOff[data-prop=highlighted]{background-color:#57a0f4}
table.l_entity-selector-container tr td:first-child{min-width:8em}

.l_entity-selector-container .l_appearance-editor { background: #ddd; }