JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id = "app">
      <div class="col-md-8" v-if="ruleForm.physician">
        <h4>Panel Selection</h4>
        <el-popover placement="bottom" trigger="click" v-model="ruleForm.selectedSample">
          <ul v-for="(item, n) in sampleList">
            <li><label><a v-on:click="addSamples(n, item.id)">{{item.name}}</a></label></li>
          </ul>
          <el-button class="btn  btn-fill panel-selection-btn" slot="reference">+</el-button>
        </el-popover>
        <div class="input-group" style="width: 200px">
          <input class="form-control search" type="text" v-model="searchPanel" placeholder="Search" @input="filterSearch()">
          <span class="input-group-addon">
            <i class="fa fa-search">
            </i>
          </span>
        </div>
        <el-tabs v-model="editableTabValue" type="card" closable @tab-remove="removeTab">
          <el-tab-pane v-for="(item, index) in tabs" :label="'Sample '+ sampleNumber[index] + '-'+  item.title"
                       :name="item.name" :key="item.name">
            <div class="col-md-12 left-0">
              <div>
                <div>
                  <span>Condition</span>
                  <el-select style="width: 94%;" v-model="condition[index+1]">
                    <el-option label="Ambient" value="Ambient">Ambient</el-option>
                    <el-option label="Frozen" value="Frozen">Frozen</el-option>
                  </el-select>
                  <h4>
                    <el-checkbox v-model="check[index+1]" @change="selectAllPanels(index+1, item.id)">Select All</el-checkbox>
                  </h4>
                </div>
                  <div class="card-content panels-category" v-for="(category, n) in panelsCategory[item.id]" :key="category.id" style="float: left">
                    <div class="panel-category" v-if="searchList[item.id][n].length > 0">
      ...

CSS

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");

.container-style {
    border-radius: 25px;
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-weight: normal;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .container-style input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }
  .checkmark {
    border-radius: 4px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 20px;
    width: 20px;
    background-color: #bde1fc;
  }
  .container-style:hover input ~ .checkmark {
    background-color: #bde1fc;
  }
  .container-style input:checked ~ .checkmark {
    background-color: #289bfa;
  }
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  .container-style input:checked ~ .checkmark:after {
    display: block;
  }
  .container-style .checkmark:after {
    left: 6px;
    top: 2px;
    width: 8px;
    height: 12px;
    border: solid white;
    border-width: 0px 3.5px 3.5px 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(40deg);
  }
  .poct_table th{
    text-align: center;
  }
  .poct_table tr {
    height: 35px;

  }
  .poct_table td:first-child {
    background-color: #bde1fc;
    text-align: center;
  }
  .poct_table thead {
    /*border: 1px solid #bde1fc;*/
    background-color: #bde1fc;
  }
  .poct_table th:not(:first-child) {
    background-color: #FFFFFF;
    border: 1px solid #bde1fc;
  }
  .poct_table  tr td + td {
    padding-bottom: 8px;
    border: 1px solid #bde1fc;
  }
  .poct_table tr th:first-child
  .poct_table tr td:first-child {
    padding-left: 10px;
    padding-bottom: 8px;
    padding-top: 15px;
  }
  .popover-help {
    margin-top: 3px;
    border: none;
    /*padding: 0;*/
    padding: 10px 0 0 0;
    /*margin-left: 40px;*/
    float: right;
    margin-right: 10px;

  }
 ...

JavaScript

var app = new Vue({
  el: '#app',
  data() {
  return {
  ruleForm: {
  				physician: '203',
          bill:'',
          icd: '',
          protocol: '',
          selectedSample: false,
          medication: [],
          requisitionNumber: '',
          selectedPatient: null,
          selectedSite: '',
          selectedContact: '',
          date1: '',
          date2: '',
          type: [],
  },
        tabSampleId: [],
        searchList: {},
        searchPanel: '',
        condition: [],
        maxPanelsLength: [],
        baseUrl: '',
        editableTabValue: 0,
        tabIndex: 0,
        tabNumber: 0,
        tabs: [],
        panelTest: '',
        check: {},
        selected: {},
        panelsCategory: {},
        checkAll: [],
        sampleNumber: {},
        form: {},
        addSample:  {},
        medicationList: [],
        patientList: [],
        sampleListLength: 0,
        sampleList2: [],
        billList: [],
        protocolList: [],
        physicianList: [],
        siteList: [],
        contactList: [],
        icdList: [],
        poctList: [],
        panelList: {},
        selectedPanels: [],
        selectedSample: [],
        checkedPocts: {
          '0': [],
          '1': [],
          '2': [],
        },
        selectedPocts: {
          '0': false,
          '1': false,
          '2': false,
        },    

  sampleList: [{"name":"ABSCESS","cost_preparation":null,"default_unit_id":null,"default_unit":null,"last_update":"2017-06-28 20:42:50","last_changed_by":"chowell","last_changed_date":"2017-10-10 20:08:51","last_changed_comment":null,"default_container_id":"2","default_container":"Cup","quantity":"5","label_template_id":"5","label_template":"Sample Labels (6cm / 3.5cm)","no_label":null,"portal_no_label":null,"show_in_portal":"1","id":"12"},{"name":"BLOOD","cost_preparation":"0.00","default_unit_id":null,"default_unit":null,"last_update":"2017-06-28...