JSFiddle - React, Tailwind, and code Playground

by pj_js15

HTML

<div class="table-container">
  <ul class="heads row-bar hidden-xs">
    <li class="col col-pid">Discount ID<a href="/suppliers/supplier-promotions/promotions?sort=byPromotionId" class="sorting-icon js-sorting-promotions"> <svg width="8" height="12"><use xlink:href="#sorting-icon"></use></svg></a>
    </li>
    <li class="col col-cDate">Creation date<a href="/suppliers/supplier-promotions/promotions?sort=byCreationDate" class="sorting-icon js-sorting-promotions"> <svg width="8" height="12"><use xlink:href="#sorting-icon"></use></svg></a>
    </li>
    <li class="col col-pname">Discount name<a href="/suppliers/supplier-promotions/promotions?sort=byPromotionName" class="sorting-icon js-sorting-promotions"> <svg width="8" height="12"><use xlink:href="#sorting-icon"></use></svg></a>
    </li>
    <li class="col col-cSDate">Customer start date<a href="/suppliers/supplier-promotions/promotions?sort=byCustStartDate" class="sorting-icon js-sorting-promotions"> <svg width="8" height="12"><use xlink:href="#sorting-icon"></use></svg></a>
    </li>
    <li class="col col-cEDate">Customer end date<a href="/suppliers/supplier-promotions/promotions?sort=byCustEndDate" class="sorting-icon js-sorting-promotions"> <svg width="8" height="12"><use xlink:href="#sorting-icon"></use></svg></a>
    </li>
    <li class="col col-cStatus">Status<a href="/suppliers/supplier-promotions/promotions?sort=byStatus" class="sorting-icon js-sorting-promotions"> <svg width="8" height="12"><use xlink:href="#sorting-icon"></use></svg></a>
    </li>
    <li class="col col-action">Action</li>
  </ul>
  <div class="bttm" id="supplierDiscounts">
    <ul class="row-bar edit_promotion_data">
      <li class="col col-pid">0000000004</li>
      <li class="col col-cDate">30/11/2018</li>
      <li class="col col-pname">Just a test</li>
      <li class="col col-cSDate">
        01/12/2018
      </li>
      <li class="col col-cEDate">02/12/2018</li>
      <li class="col col-cStatus">Expired</li>
      <li...